转 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创建数据库

1. $ mysql -u root -p
2. mysql> create database showslow;
3. mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';
4. mysql> grant all privileges on showslow.* to showslowuser@localhost;
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的默认主界面上都有提示