高手的存在,就是让服务10亿人的时候,你感觉只是为你一个人服务......

前端性能测试

目录
  1. 1. 工具介绍:
    1. 1.1. dynatrace:
    2. 1.2. showlsow:
    3. 1.3. yslow:
    4. 1.4. pagespeed:
    5. 1.5. selenium:
  2. 2. 测试方案:
  3. 3. 环境以及工具准备:
    1. 3.1. 说明:
  4. 4. 工具下载好了,我们开始合体:
    1. 4.1. Dynatrace配置
    2. 4.2. Yslow配置:
  5. 5. 配置方面的可以参考:
  6. 6. 可以下载项目,自己看吧

前段时间领导要求统计网站几个核心页面的性能指标,pagesize、request数量、请求体积等,本身对前端 的东东不是很了解,看了一些资料,学习了一些前端的知识,包括页面渲染的顺序,各浏览器对请求的处理机制,各大公司对前端性能的一些指标等,结合网友总结 的一些工具的使用,简单的搭建了前端性能监控平台。

当然目前有很多前端性能测试网站,如阿里测、监控宝、webpagetest等,我搭建该平台的原因有三点,第一:网络问题,由于生成环境不能连接外网 第二:开源工具webpagetest搭建没搞定,网上的资料不全,英语不好,看不懂英文网站 第三:学习
前端知识的学习推荐:fex.baidu.com
性能测试网站推荐:http://www.alibench.com/
webpagetest开源工具:http://www.webpagetest.org/

工具介绍:

dynatrace:

http://www.ibm.com/developerworks/cn/web/1205_xieju_dtraceajax/

showlsow:

showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件、page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示。只需要在dynatrace安装目录下进行一些设置,即可自动实现上传结果到showslow平台作为存档、分析及监控。
http://www.showslow.org/Main_Page

yslow:

基于firebug的评测分析工具,yahoo产;和page speed类似工具,会给出页面的评分和优化说规则,同时会提供页面下载资源的统计分析功能,还提供了一些小工具,如js运行检测,图片的优化工具,未符合规则的资源有哪些等等。总的来说是page speed的增强版。
yslow前端评分标准:
http://developer.yahoo.com/performance/rules.html

pagespeed:

基于firebug的web页面优化的评测工具,同时还有支持chrome的插件,因为是google产的。
https://developers.google.com/speed/docs/best-practices/rules_intro

selenium:

web自动化测试工具
http://baike.baidu.com/subview/478050/6464537.htm?fr=aladdin

测试方案:

Alt text

环境以及工具准备:

下载相关工具
pagespeed插件:http://pan.baidu.com/s/1c0vP4VA
yslow插件:http://pan.baidu.com/s/1eQkWdKu
firebug:http://pan.baidu.com/s/1hq44Q92
dynatrace4.3.0:http://pan.baidu.com/s/1c01piBu
xampp集成软件包:http://pan.baidu.com/s/1sj8Wkqh
MyEclipse8.6:http://pan.baidu.com/s/1eQEcuSq

说明:

  • (1).之所以用firefox19.0,因为坑爹的yslow、pagespeed、dynatrace、firebug、firefox之间的兼容问题,firefox30的兼容性不好,我也没多找资料,就用了19,我觉得完全可以用
  • (2).showslow为php的小项目,完全可以自己搭建一套php的环境、apache、,mysql,在此推荐xampp(XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建 XAMPP 软件站集成软件包)http://baike.baidu.com/view/864591.htm?fr=aladdin

    工具下载好了,我们开始合体:

  • 1.安装firefox19.0浏览器,把firebug、yslow、pagespeed插件加入
    Alt text

  • 2.安装dynatrace
    Alt text

    1. 安装xampp,整合showslow
      Alt text

点击mysql的admin按钮,我们可以添加showslow的数据库,添加用户,设置权限,都比较简单,我添加了一个叫showslow的数据库
Alt text

数据库方面的ok了,apache方面我们不用进行设置,默认的DocumentRoot在xampp文件夹下的htdocs文件。
进入xmapp安装目录的htdocs文件夹,清空所有东西,将下载的showslow减压到该文件夹中,修改showslow解压目录下的config.sample.php文件名为config.php,修改该文件的数据库连接信息,按照上面创建的数据库名,用户名,密码即可
Alt text

给showslow创建表结构,通过运行showslow解压主目录下的dbupgrade.php和users子目录下dbupgrade.php文件,我们只要在浏览器中输入http://localhost/dbupgrade.phphttp://localhost/users/dbupgrade.php就可以了
然后,我们输入http://localhost/,测试一下showslow是否ok

    1. 环境基本搭建完成,下面我们设置dynatrace,yslow,pagespeed自动上传数据到showslow

      Dynatrace配置

      配置:dynatrace安装文件下的dtajax.ini文件增加如下三行,其中第三行可设置dynatrace自动上传结果至showslow:
      -Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http:// localhost/beacon/dynatrace
      -Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http:// localhost/
      -Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true

      Yslow配置:

      配置YSlow
  • 1.打开Firefox输入:about:config(我保证会很小心的)
  • 2.filter中输入:yslow
  • 3.修改以下三条数据
    extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/
    如果测试和服务器不在同一机器上,请将localhost改成实际地址
    extensions.yslow.beaconInfo = grade
    extensions.yslow.optinBeacon = true
  • 4.重启Firefox
    Alt text

Pagespeed配置:
Alt text

万恶的pagespeed,不知道怎么的,数据上传不到showslow中,有知道原因的请解惑
http://zhidao.baidu.com/question/552903737028719092.html?quesup2&oldq=1

配置方面的可以参考:

http://blog.csdn.net/five3/article/details/7688298
结合selenium自动化性能测试:

可以下载项目,自己看吧

http://pan.baidu.com/s/1kTIBPEB
设置环境变量
DT_AE_AGENTACTIVE=true
DT_AE_AGENTNAME=”any string name”

Alt text