1.背景

应用的性能测试与优化目前主要停留在服务器端的反馈,而对于前端性能标准的研究与测试相对比较空白,缺乏统一的标准与工具。众所周知,浏览器html组件的下载及渲染性能直接影响最终的用户体验,目前应用的前端性能有许多优化空间,因此对前端性能进行测试与监控,有利于提升客户体验,做到全方位的性能监控,实现“客户第一”的价值。

2.前端性能标准

目前较为流行且免费的前端性能评测标准及工具,是以yahoo的yslow及google的pagespeed为主。yslow和page speed是两款firefox浏览器下功能类似的插件,其主要功能是在用户访问网页时,可用此插件对当前访问的网页按若干条固定的评分标准进行前端性能评分。另有dynatrace也提供与yslow和page speed类似的评价标准。

2.1 yslow

评分标准:主要有35条评分标准,具体标准参见官方文档http://developer.yahoo.com/performance/rules.html

插件下载http://developer.yahoo.com/yslow/

插件运行:插件运行后,在firefox中访问网页,插件将会显示对该网页的评分,15个标准(使用到的评分标准数在不同版本的yslow插件中有所不同)从A-F进行打分。下图是对阿里巴巴中文网站首页的一个打分情况:

2.2 page speed

评分标准:pagespeed主要的评标准有29条http://code.google.com/speed/page-speed/docs/rules_intro.html

插件下载http://code.google.com/speed/page-speed/download.html

插件运行:pagespeed除了支持firefox外,还支持google chrome浏览器,下图是在firefox中用page speed评估http://www.1688.com的结果

2.3 dynatrace ajax edition

评分标准:评分标准分为四个大类,包括Cache、网络、Server端、JavaScript代码,每个大类都有A~F六个等级,各个大类下面的最佳实践细则与yslow及page speed类似http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization

下载安装:https://www.dynatrace.com

运行情况:dynatrace可以支持firefox和ie,且其可支持到函数级的度量分析,在windows下运行dynatrace如下图所示

3.方案选择

3.1dynaTrace Ajax Edition

dynaTrace Ajax Edition是一款免费的前端性能评测工具,与非常优秀的yslow及page speed相比,其仍有几个不容忽视的优点:

1)         支持IE浏览器,这个优点直接秒杀另外两个工具

2)         支持JS函数级的性能分析

3)         对每条细则的建议更加详细具体

3.2showslow

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

4.环境搭建与工具使用

4.1dynatraceAjax Edition

4.1.1 安装运行

从dynatrace官网http://ajax.dynatrace.com下载安装最新版本的dynatraceAjax Edition即可。dynatrace的启动可直接从菜单栏中进行运行,也可在IE插件栏中点击按钮运行。

4.1.2上传结果至showslow

对相应的链接右击,就可将相应结果上传到showslow

4.1.3 showslow中查看结果

showslow中看到的结果页面如下图所示:

4.2showslow环境搭建

1. 如是Linux平台,需要预先安装如下软件:libmcrypt-2.5.8,ncurses-5.7.tar.gz,zlib-1.2.3(要用64位方式编译http://blog.sina.com.cn/s/blog_5f66526e0100gkzu.html)。

2.安装MySQL,要求mysql5以上版本。

3.安装Apache,最好安装2.0以上版本。

4.安装php,要求php5.2以上版本。

在Linux平台上搭建apache+php+mysql的文档网上有很多,大家可参阅,我在安装过程中遇到的问题,在文档最后有一个环境问题总结,可能会对大家有帮助。搭建完成基本的mysql+apache+php之后,再用如下的步骤可搭建showslow环境http://www.showslow.org/Installation_and_configuration

第一步,下载showslow

下载showslow:https://github.com/sergeychernyshev/showslow/downloads

第二步,解压

解压showslow至某一文件夹,如:/www/showslow

第三步,设置apache

将showslow文件设置为apache的DocumentRoot,修改或添加httpd.conf文件内容如下:

<VirtualHost *:80>

DocumentRoot/www/showslow #目录主路径,必须有这个目录才写

DirectoryIndexindex.htm index.html index.jsp index.php default.html defautl.htm default.jsp

ErrorLoglogs/market-error_log

CustomLoglogs/market-access_log common

</VirtualHost>

第四步,新建数据库

在mysql中新建一个数据库showslow,授所有权限给showslowuser用户:

mysql> createdatabase showslow;

mysql> grant all onshowslow.* to showslowuser identified by 'showslow';

并在showslow文件夹下的config.sample.php文件中进行如下所示的数据库参数的修改,修改完成后另存为config.php:

$db = 'showslow';

$user = 'showslowuser';

$pass = 'showslow';

$host = '10.20.155.4';

第五步,更新数据库

绑定showslow到我们台式机的hosts文件里,方便访问(也可以直接ip访问):

10.20.155.4 www.myshowslow.com

启动Apache,可在http://www.myshowslow.com看到showslow平台,报错是因数据库未更新,访问http://www.myshowslow.com/dbupgrade.phphttp://www.myshowslow.com/users/dbupgrade.php将数据库中的表更新至与当前版本showslow一致。

第六步,设置dynatrace

dynatrace安装文件下的dtajax.ini文件增加如下三行,其中第三行可设置dynatrace自动上传结果至showslow:

-Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http:// 10.20.155.4:8070/beacon/dynatrace

-Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http:// 10.20.155.4:8070/

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

第七步,大功造成,上传并显示结果

按4.1节中的上传结果至showslow.com即可将前端性能分析结果上传至shlowslow。

4.3 dynatrace+showslow与UI自动化结合

只需要在ruby语言所写的自动化脚本中加入如下两行,即可在运行UI自动化脚本时,把UI自动化所访问到的页面的前端性能数据,通过所安装的dynatrace自动上传至showslow平台。

ENV['DT_IE_AGENT_ACTIVE'] = 'true'

ENV['DT_IE_SESSION_NAME'] = 'Watir Sample Test'

一个完整的示例代码也只需要8行:

require 'pwatir'

ENV['DT_IE_AGENT_ACTIVE'] = 'true'

ENV['DT_IE_SESSION_NAME'] = 'Watir Sample Test'

b = Watir::IE.new

b.goto('http://www.baidu.com')

b.text_field(:id, 'kw').set 'watir'

b.button(:id, "su").click

b.close()

4.4 Linux中安装mysql+apache+php问题小结

4.4.1Can't connect to local MySQL server through socket‘xxx’

安装mysql后,运行mysql命令会出现ERROR 2002(HY000): Can't connect to local MySQL server through socket ‘xxx’错误,通常是由于安装完成mysql之后未启动造成的,执行/etc/init.d/mysqlstart即可。

mysql安装好之后,默认的root密码是空,mysql –uroot –p后在密码输入行直接回国即可命令模式以root进入mysql。

4.4.2 安装php时configure及make时报错的问题

从源码安装php时,要运行如下的编译项:

./configure --prefix=/usr/local/php5--with-charset=utf8 --with-extra-charsets=gbk,gb2312,utf8 --with-apxs2=/usr/local/httpd/bin/apxs--with-config-file-path=/usr/local/lib/php --with-mysql=/data/mysql--enable-mbstring --with-mysqli=/data/mysql/bin/mysql_config--with-mcrypt=/usr/local/libmcrypt

因此需要安装apache,mysql,mcrypt等软件之后,才能安装php。

4.4.3 php安装过程中httpd.conf相关的配置修改

在从源码安装php过程中,运行make命令后将php源代码目录modules下的libphp5.so拷贝至httpd/modules下,并在httpd.conf中加载这个module并添加两种文件类型:

LoadModule php5_module modules/libphp5.so

AddType application/x-httpd-php .php

AddType application/x-httpd-php .html

安装完成php后,需要将php源代码目录下的php.ini-dist拷贝至--with-config-file-path指定的/usr/local/lib/php目录下并改名为php.ini,同时在httpd.conf文件中指定php.ini文件位置:

PHPIniDir "/usr/local/lib/php"

使用dynatrace+showslow进行前端性能测试的更多相关文章

  1. Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED

    Xvfb+YSlow+ShowSlow搭建前端性能测试框架 - 前端技术 | TaoBaoUED Xvfb+YSlow+ShowSlow搭建前端性能测试框架 作者:黑三 | 时间:2010-07-07 ...

  2. Web前端性能测试-性能测试知多少---深入分析前端站点的性能

    针对目前接手的web前端的性能,一时间不知道从什么地方入手,然后经过查找资料,发现其实还是蛮简单的. 前端性能测试对象: HTML.CSS.JS.AJAX等前端技术开发的Web页面 影响用户浏览网页速 ...

  3. H5前端性能测试快速入门

    前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道 ...

  4. 两款较好的Web前端性能测试工具

    前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么 前端性能测试对象主要包括: HTML.CSS.JS ...

  5. [原创]H5前端性能测试工具介绍

    [原创H5前端性能测试工具介绍 一 网络抓包工具 网络抓包工具选择原则,可以捕获网络请求,抓取具体请求信息流,同时可以针对网络请包进行修改或拦截: 1.Fiddler(推荐) 2.Charles(推荐 ...

  6. 【转】两款 Web 前端性能测试工具

    前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.J ...

  7. sitespeedio前端性能测试工具介绍

    很久没有写博客了,今天给大家介绍一款比较好用的前端性能测试工具. sitespeedio简介: sitespeed.io是Jonathan Lee发布的一款可监视和衡量网站前端性能的开源工具. 1.开 ...

  8. 前端性能测试(H5性能测试)

    前端性能调优方法同样适用于H5. 1.H5前端性能知识点 学习前端性能,必须对HTTP协议有所了解. 1.1 浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具. 浏览器的主要功能:将用户选择的 ...

  9. 转 ShowSlow+Yslow页面前端性能测试环境搭建

    ----//工具介绍 Yslow:YSlow是Yahoo发布的一款基于FireFox的插件. YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. ShowSlo ...

随机推荐

  1. Spring mvc 报错:No qualifying bean of type [java.lang.String] found for dependency:

    具体错误: No qualifying bean of type [java.lang.String] found for dependency: expected at least 1 bean w ...

  2. http基础实战

    1.需求 了解http的基础知识,能看懂chrome下网络的情况 2.前置知识 下面是tcp/ip协议的一些东西,今天就只用了解应用层的http就够了. 3.http是什么 我们在网上浏览网页,会发送 ...

  3. js生成当前时间

    js生成当前时间 var today=new Date(); function itArray(){ this.length=itArray.arguments.length for(var i=0; ...

  4. STL next_permutation和prev_permutation函数

    利用next_permutation实现全排列升序输出,从尾到头找到第一个可以交换的位置, 直接求到第一个不按升序排列的序列. #include <iostream> #include & ...

  5. 在ROS下编写自己的节点来订阅话题(C++)

    参考 http://blog.csdn.net/u013453604/article/details/49102957     的博客,其实这些内容和 <开源机器人操作系统> 这本书差不多 ...

  6. js ajax简单使用

    文章部分资源来源:(http://blog.csdn.net/lzkkevin/article/details/6777474)以及(http://www.cnblogs.com/hwx0807/ar ...

  7. shell脚本实现拷贝大文件显示百分比的代码分享

    #!/bin/sh strace -q -eread cp -- "${1}" "${2}" 2>&1 \| awk '{    count += ...

  8. pypi 国内镜像 及修改全局方法

    PyPi的官方网站为https://pypi.python.org,有时访问中会很慢,使用pip命令安装带其他依赖包的安装包,会经常失败.解决办法,使用国内PyPi镜像网站,修改pip的源. 网上搜索 ...

  9. ios 关于使用异步网络请求时block回调的内存注意

    在一个controller中,使用 NSURLSessionDataTask *dataTask = [[NSURLSession sharedSession] dataTaskWithRequest ...

  10. ios NSString 转 float的注意

    今天有一个字符串 “33.3”,用想用[valueString floatValue];得到33.3000这个值,结果得到了33.2999这个值,取前3位一个是33.3,一个是33.2,产生了错误,应 ...