转 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

  1. $ mysql -u root -p
  2. mysql> create database showslow;
  3. mysql> grant usage on showslow.* to [email protected] identified by ‘... database-password ...‘;
  4. mysql> grant all privileges on showslow.* to [email protected];
  5. 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上直接查看即可。

PS:
关于showslow的使用和分析可以看这边文章:

http://blog.dynatrace.com/2009/11/17/a-step-by-step-guide-to-dynatrace-ajax-edition-available-today-for-public-download/
如何集成到自动化可以看这些文章:
http://blog.dynatrace.com/2009/11/04/5-steps-to-automate-browser-performance-analysis-with-watir-and-dynatrace-ajax-edition/
http://blog.dynatrace.com/2010/05/21/how-to-use-your-selenium-tests-for-automated-javascriptajax-performance-analysis/
http://blog.dynatrace.com/2011/01/05/5-steps-to-setup-showslow-as-web-performance-repository-for-dynatrace-data/

最后有其他问题可以去它的社区去问,去它的博客去搜,所有的联系方式在dynatrace的默认主界面上都有提示

时间: 01-04

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

转 web前端性能分析--分析篇

通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同时还支持yslow,pagespeed,webpagetest等测试工具传上去的数据,因此在具体的分析之前要从纵向.横向来收集数据,这样统计分析出来的结果才能有实际的参考价值.当然如果你还发现其它工具也可以提供一些性能数据,也可以收集起来,比如:httpanalyzer,httpwatcher都支持

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

转自http://blog.csdn.net/five3/article/details/7686715 web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求2.递归寻找DNS服

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

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

前端性能分析

前端性能分析 最近在读一本经典书<高性能网站建设进阶指南>. 虽然书籍很多年前就出版了,但里面的内容还是耐人寻味,这次就好好的实践了一下. 纸上得来终觉浅,绝知此事要躬行,实践中将会发现一些问题. 有个官方网址<Even Faster Web Sites>,点击“Run the Examples”按钮,就能进入在线demo. 在Github上面有个叫awesome-wpo的项目,里面记录了各个方面关于性能的资源,有书籍.文章.工具等. 下面所有的实验都是在Chrome 49浏览器中

web前端性能优化——干货

web前端性能优化 2017-05-23 服务器--分析工具:YSlow 1.多台服务器--服务器集群(应用服务器): 2.负载均衡 服务器:接受请求,分配服务器: 3.数据库(读:写=7:3),主服务器(读)<---->缓存服务器<---->从服务器(写)分离. 注:可以参考:李智慧的<大型网站架构演化发展历程> 网页前端--可以参考<高性能网站建设(进阶)指南> 1.减少HTTP请求,图片地图,合并脚本和样式表 2.使用内容发布网络--CDN.CDN:C

web前端性能调优

web前端性能调优 最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心应手.参照了<高性能网站建设指南-前端工程师技能精髓>,本文主要主要概述前端的性能调优的方法. 第一条优化:减少http请求 一想到调优好多人都会想到减少http请求,但是可能好多人都会不知道具体操作,我一开始也不知道.项目刚好使用fis发现fis可以打包脚本和样式表.perf

WEB前端性能优化常见方法

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程. 常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

web前端性能优化总结

网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页面. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的.除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.就好像,好多人问,男人在找女朋友的时候是不是只看外表,一些智慧的男人给出了这样