某网站前端页面性能测试

1页面性能测试概述

页面性能测试则是针对于页面性能优化而开展的一种性能测试，目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议，最终提升系统的整体性能表现，提高用户体验满意度。他的关注点是在与页面，不在于后端。有别于我们通常说的性能测试。

相对于C/S架构的应用系统，Web应用系统所有数据都需要从服务器端下载，虽然浏览器有缓存机制，但客户每次访问仍然需要下载大量

很多人觉得如果有大量服务器做支撑，就不会存在性能问题，其实是不对的，当硬件达到一定水准后提升硬件已无作用。举个例子，当一个页面中包含几百个请求，页面中没有经过优化的javaScript文件、CSS 文件与图片件大小达到10MB，即使当前只有一个用户在访问该系统，页面的访问速度也会慢得惊人，纵使增加再多的服务器也不见得会有明显的性能提升。

2提高页面性能的一般方法

2.1减少请求和响应的往返次数

HTTP缓存是最好的减少客户端服务器端往返次数的办法。缓存提供了提供一种机制来保证客户端或者代理能够存储一些东西，而这些东西将会在稍后的HTTP 响应中用到的。（即第一次请求了，到了客户端，缓存起来，下次如果页面还要这个JS文件或者CSS文件啥的，就不要到服务器端去取下来了，但是还是要去服务器上去访问一次，因为请求要对比ETag值。

2.2减少请求和响应的往返字节大小

l 使用更少的图画

l 将所有的CSS浓缩到一个CSS文件中

l 将所有的脚本浓缩到一个JS文件中

l 简化你的页时间

l 使用HTTP压缩

PS：貌似太理想化了。。。。。

2.3太多了yahoo的22条规则，值的参考

3页面性能测试的环境搭建

环境为：Yslow+ShowSlow+WAMP（VertrigoServ）

步骤如下：

n 创建一个db为showslow

n 导入下载的ShowSlow中的tables.sql

n 把下载的ShowSlow放到www目录下，修改config.php中的

$db = 'showslow';

$user = 'root';

$pass = '123456'; //密码根据你的情况修改。

n 打开ff配置about:config

过滤器：yslow

修改下面三项内容：

extensions.yslow.beaconUrl=

http://localhost.com/showslow/beacon/yslow/

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

n 重新启动浏览器：在浏览器内输入http://localhost/showslow/

n 如果页面上没有任何错误提示的话，恭喜你，你太幸运了。

n 启动ff，进入ShowSlow，然后在打开要测试的页面启动yslow

4测试范围

对线上的部分页面进行测试，如下：

www侧：首页、单品页、我的订单页

seller侧：订单管理

5 测试结果与分析

5.1 www侧：首页

测试时间：2011-9-30

地点：公司

5.1.1 减少http request

8个外部js

4个外部css

10个外部background images

不知是否可以使用CSS Sprites整合图片、合并CSS文件、合并JS文件。

5.1.2 加入CDN

html.xxx.com

www.xxx.com

log.xxx.com

img.xxx.com

5.1.3 设置过期的http header

可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中，不过也有一定的风险，毕竟js和css有一定的逻辑

具体列表见 首页-没有设置过期的http header的东东.txt

5.1.4 对页面组件进行gzip压缩

首页中有以下东东，不知是否可以进行压缩处理

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/index0902.css

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

PS：这个是一个在线的压缩工具，个人感觉不错，能给出比较好的压缩信息与参数，方便调试，地址：http://tool.lanrentuku.com/csszip/

5.1.5 js的位置

为了实现最大的下载并行，页面加载初期做的事，最好只有HTML的下载，CSS的下载,JS的下载等，下载完成后再去实现页面渲染，JS脚本运行等。所以一般的处理办法还是页面头部引入JS链接，页面底部执行JS脚本程序。

下面的链接，我试了下，除了第一个，剩余的都可以放到底部

· http://www.xx.com/js/jquery.js

· http://html.xx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

5.1.6 设置ajax缓存

虽然ajax是异步的，但不能保证不会等待异步的这段时间，不过为避免重复的ajax请求，加上缓存也是件好事吧J

首页测试的时候只有一个地址，如下

http://www.xxx.com/ajax/loginInfoAjax.jhtml?jsoncallback=jsonp1317353338559

我看这个貌似是会员的一些信息，包括购物车中商品数，用户名、状态等

5.1.7 减少DOM元素的数量

首页中差不多有1584个DOM elements

是否可以优化下首页结构，毕竟首页是门帘，用户体验也很重要的!

5.1.8 尽量使用与域名无关的cookie

所谓的 cookie-free domains 就是在浏览器发送静态内容的请求时不会发送cookies 的域名。首页中有如下：

· http://www.xxx.com/js/100023.js

· http://html.xxx.com/html/images/header0811/bor.gif

· http://html.xxx.com/html/images/header0811/menu.png

· http://html.xxx.com/html/index0601/indexbg.png

· http://html.xxx.com/html/index0601/boder.gif

· http://html.xxx.com/html/index0601/h3bg.gif

· http://html.xxx.com/html/index0601/floorico.png

· http://html.xxx.com/html/index0601/botdy.gif

我看这里面有些图片一般是不会改变的，是否考虑放到静态服务器上，以减少cookie的反复传输对主域名的影响。

5.1.9 简单的统计数据

5.2 www侧：单品页

测试单品页为：

http://www.xxx.com/goods/3B2BDB2CF26A4641_453v4563.html

测试时间：2011-9-30

地点：公司

5.2.1减少http request

有21个外部js

6个外部css

12个外部background images

不知是否可以使用CSS Sprites整合图片、合并CSS文件、合并JS文件不知是否可以使用CSS Sprites整合图片、合并CSS文件、合并JS文件

5.2.2设置过期的http header

可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中，不过也有一定的风险，毕竟js和css有一定的逻辑。

详细的URL见 单品页-没有设置过期的http header.txt

5.2.3对页面组件进行gzip压缩

单品页中有以下东东，不知是否可以进行压缩处理

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/details0629.css

· http://html.xxx.com/im/css/webIM.css

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

· http://html.xxx.com/html/js/ajax.js

· http://im.xxx.com:9090/cdmocsc/commons/connection.jsp?...

· http://html.xxx.com/im/cdjs/jquery-1.4.2.min.js

PS：这个是一个在线的压缩工具，个人感觉不错，能给出比较好的压缩信息与参数，方便调试，地址：http://tool.lanrentuku.com/csszip/

5.2.4 js的位置

单品页中太多的js放到了头部

· http://www.xxx.com/js/jquery.js

· http://www.xxx.com/js/jquery.cookie.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://www.xxx.com/js/qt.js?...

· http://www.xxx.com/js/pageutil_20110706.js

· http://www.xxx.com/js/goodsdetail_20110705.js

· http://www.xxx.com/js/jquery.countdown.1.0.js

· http://www.xxx.com/js/jquery.lazyload.mini.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

大部分的js都可以放到底部，尤其是一些直接写的function

5.2.5 避免css表达式

http://html.xxx.com/html/css/details0629.css

仅此一个，有时候迫不得已使用，不过还是少用为好，哈哈，这个玩意强大又危险

5.2.6 减少DNS查找

· www.xxx.com: 21 components, 285.7K (88.5K GZip)

· html.xxx.com: 31 components, 428.6K

· log.xxx.com: 1 component, 12.4K (4.1K GZip)

· img.xxx.com: 51 components, 409.2K

· space.feixin.10086.cn: 1 component, 0.0K

· wpa.qq.com: 1 component, 0.0K

· im.xxx.com: 1 component, 2.7K

没办法，这个没法控制的很好，即使是淘宝也一样，暂且飘过吧~

5.2.7减少DOM元素的数量

此单品页中有1243 DOM elements，呃。。。。和首页快有一拼了。。。。。

5.2.8 简单的统计数据

左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况

呃。。。这请求数貌似是比较多，赶上首页了，嘿嘿