web前端性能分析--实践篇

当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了。通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的。

  不仅支持ie,ff浏览器,还具备js函数级别的优化分析,它的分析数据也是最全面的,分析数据可以导出,最后和yslow,pagespeed一样支持向showslow上面传送结果信息这样就节省了很多的事情了。所以实施方案具体确定为dynatrace用来捕获web前端页面访问的性能数据,然后上传至showslow来浏览测试结果。

  dynatrace安装与使用

  1、下载并安装dynatrace ajax edition

  2、从开始--》程序就可以打开该工具

  3、启动IE后默认状态是没有连接到dynatrace

  4、点击ie上dynatrace插件的最左边的连接

  5、连接成功后会自动刷新当前url页

  6、此时刷新dynatrace工具界面上的browser节点

  7、载入测试数据成功后就能看到数据分析图表

  showslow站点的安装

  showslow是一个开源的php项目,主要用来展示多个测试工具的性能数据,比如yslow等。它有一个线上版的,也支持你下一个源码在自己的公司搭建一个本地版showslow。所以这里我们会搭建一个自己私人的showslow站点。

  1、下载showslow,并解压到一个本地目录

  2、下载搭建showslow站点的其他支撑程序,如web服务器、php、mysql等

  3、下载apache2.2,,nginx也可以,其它的支持php执行的web服务器都行【但是配置可能有点麻烦】

  4、下载php程序,最好是5.3的,而且是线程安全的版本【不然有些模块没有,而且安装时选择apache 2.2 x-modle,以及安装扩展插件】

  5、下载mysql5.5及以上的,这个默认安装的选项就可以了

  配置各支持程序:

  官方说明链接:http://www.showslow.org/Installation_and_configuration

  apche配置:

  1、先测试一下默认的安装后是否可以工作

  2、修改httpd.conf配置文件

  3、去掉以下3个模块加载的注释符号: mod_deflate, mod_rewrite and mod_expires

  4、添加一行模块加载语句LoadModule php5_module "x:/.../php/php5apache2_2.dll"

  5、添加以下2种web的请求类型页:【在<IfModule mime_module>标签之间】

  AddType application/x-httpd-php .php

  AddType application/x-httpd-php .phtml

  6、在文档最下方添加一行php配置文件的目录:PHPIniDir "x:/.../php"

  7、修改DocumentRoot的路径为你解压showslow的目录【记住是有两处,还有一个在<Directory >标签处】

  8、为DirectoryIndex添加一个默认的php浏览文件:形如:DirectoryIndex index.php

  9、浏览以下index.php页,如果显示了php源码文件内容,则上述配置没有什么大问题

  php配置:

  1、打开php安装目录中的配置文件php.ini

  2、取消以下2个扩展模块的注释符号:php_mysql.dll,php_mysqli.dll

mysql配置:

  1、测试mysql是否安装正确

  2、给showslow创建数据库


[sql] view plaincopy

$ mysql -u root -p

mysql> create database showslow;

mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';

mysql> grant all privileges on showslow.* to showslowuser@localhost;

mysql> quit

[sql] view plaincopy

$ mysql -u root -p

mysql> create database showslow;

mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';

mysql> grant all privileges on showslow.* to showslowuser@localhost;

mysql> quit

  3、修改showslow解压目录下的config.sample.php文件名为config.php

  4、修改该文件的数据库连接信息,按照上面创建的数据库名,用户名,密码即可

  5、给showslow创建表结构,通过运行showslow解压主目录下的dbupgrade.php和users子目录下dbupgrade.php文件【如果是在linux下可以在主目录运行make命令即可】

  ok,现在所有的配置都已经完成了,可以再次访问我们配置的网址,是不是已经可以正常访问了。

  集成dynatrace和showslow:

  2个程序单独的都已经安装完成就可以合作使用了,其实集成就是在dynatrace主程序界面,或者叫代理界面中进行一个上传操作即可。

  1、点击查看之前录制的性能数据的概要页面

  2、在右边上方窗口中选择一个url地址

  3、右键之,选择上传至showslow.com

  不过点过之后应该没有起到作用,因为还需要在dynatrace的配置文件添加一些配置:

  1、打开dynatrace的配置文件dtajax.ini,在安装目录

  2、添加如下配置行

  -Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http://www.showslow.com/beacon/dynatrace

  -Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http://www.showslow.com/

  第一行为上传的位置,即数据传输到哪;其实是指向了一个php文件,这个文件用来接收发送过去的json字符串,并存储在showslow的数据库中

  第二行为手动上传后提示你打开showslow页面查看数据分析时的url地址

  3、现在再去上传一次,然后去showslow首页刷新一次

  集成到自动化测试的环境中:

  让dynatrace自动上传数据:

  其实dynatrace没有任何的外部标准接口可以被自动化所调用,但是却提供了一些简单的可配置的选项,比如可以在dtajax.ini文件中配置自动上传,

  具体为添加如下行即可:

  -Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true

  让自动化测试执行时自动捕获网页浏览数据:

  还有一个可以配置dynatrace的地方就是环境变量,因为当浏览器安装了dynatrace的插件后,每次启动插件都会去检查特定的环境变量,若其值等于特定的配置则会

  作为初始化为插件的参数;而其中就有环境变量支持作为工具的开关功能,在运行自动化测试时可以通过控制这些环境变量的值就可以间接的控制dynatrace了。

  因版本不同会有不同的环境变量名,具体可以看一下这里。https://apmcommunity.compuware.com/community/display/AJAXFORUM/Automation+with+dynaTrace+AJAX+Edition

  其中3.x的环境变量如下:

  DT_AE_AGENTACTIVE=true

  DT_AE_AGENTNAME="any string name"

  这样你启动的每一个浏览器实例都会默认打开dynatrace的代理功能,所以整个自动化的测试过程中的所有页面访问数据都会被收集,同时在你测试完成关闭浏览器之后会

  自动发送所有数据到指定的showslow上面,测试结束后还可以发送邮件给相关人员去showslow上直接查看即可。

相关文章:

web前端性能分析--原理篇   

最新内容请见作者的GitHub页:http://qaseven.github.io/

   

时间: 2024-09-19 08:19:35

web前端性能分析--实践篇的相关文章

web前端性能分析--原理篇

web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求 2.递归寻找DNS服务器 3.连接目标IP并建立TCP连接 4.向目标服务器发送http请求 5.web服务器接收请求后处理

WEB前端性能分析--工具篇

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

WEB前端性能优化:HTML,CSS,JS和服务器端优化

文章描述:WEB前端性能优化小结. 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前端性能优化. HTML部分 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 减少DOM节点:加速页面渲染: 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 防止src属性和link的href属性为空:当值为空

Web前端性能优化全攻略

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

Web前端性能优化教程:精简JS 移除重复脚本

本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:Web前端性能优化 一.精简javascript 基础知识 精简:从javascript代码中移除所有的注释以及不必要的空白字符(空格,换行和制表符),减少javascript文件的大小. 混淆:和精简一样,会从javascript代码中移除注释和空白,另外也会改写代码.作为改写的一部分,函数和变量的名字将被转换为更短的字符串,所以进一步减少了javascript文件的大小.

前端性能分析优化

分析问题 我们并不仅仅关注页面资源的解析和展示响应时间,而是要关注总时间:我们进行web前端性能测试的目的是计算出包含页面渲染.网络传输以及服务器端解析等综合因素在内的加载时间等指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此结果的基础上,给出一定的优化建议和解决方案,从而提升用户体验. 根据雅虎团队经验:网站页面性能优化的34条黄金守则,我们逐条分析. 性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所

推荐IE前端性能分析神器DynaTrace Ajax Edition

该工具得到了JQuery作者John Resig以及前端性能大牛Steve Souders的推荐,是IE平台上最好的性能分析工具:而且是免费的,当前版本是2.0. 该工具实在过于强大,这里先上两张图,介绍下Timeline功能和Hotspot功能. Timeline如下图,可以列出整个网页打开的瀑布图. Hotspot可以说明IE花在渲染.js解析.js运行.css渲染.cookie等各个动作上的详细性能数据: 刷新评论刷新页面返回顶部 About www.spiga.com.mx Copyri

Web前端性能 优化进阶路

简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段大概持续半年左右,有足够的时间形成一些优化思路的沉淀. 一:初探期2010年底我们开始接手搜索List页面,这是中文站历史最为悠久的页面之一,当时它的生命体征正如它的年龄一样,非常虚弱:当时的基调网络监控显示,页面的完全加载的时间是16秒!作为以"快"为核心业务指标的搜索页面,这个状态显然已是无法承担重任了.性能是一定要优化的,但我们也面临着大多数前端同学所面临的共性问题 - 业务需求紧张,况且我们是 刚刚接手

web前端性能优化之合并静态资源请求

除过在前端编码的时候将css.js等静态资源文件合并压缩之外,我们还可以在页面中将多个css.js的请求合并为一个请求. 比如我们在淘宝的首页源码中可以看到以下的css引用: <link rel="stylesheet" href="/??tb/global/2.6.0/global-min.css,tb/tb-fp/1.7.2/style-min.css?t=20131231"> 这段代码通过一个网络请求完成两个css文件的请求,是怎么做到的呢? 原来