本文整理于小强测试帮微信公共号

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/h2bg.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 简单的统计数据

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

H5、web端页面的性能测试案例以及页面性能测试分析相关推荐

2019年末逆向复习系列之今日头条WEB端_signature、as、cp参数逆向分析
郑重声明:本项目的所有代码和相关文章, 仅用于经验技术交流分享,禁止将相关技术应用到不正当途径,因为滥用技术产生的风险与本人无关. 这篇文章是公众号<云爬虫技术研究笔记>的<2019 ...
web端实现rtsp实时推流视频播放可行性方案分析
1.webrtc 1.1 什么是WebRTC 百度概念:WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下 ...
Web端CAD图形找不同？一键在Web端找出CAD图不同并对比分析
引言在实际中,当多专业设计协助时,遇到图纸更新后,要对比图纸找出图纸的不同处,一直是一个比较耗时费力的事情,也是业内的一大痛点.一般CAD新旧图纸的内容对比,包括增加新的图形元素.减少原有的图形元素 ...
H5移动端实现左右滑屏切换页面
项目中需要实现的一个需求是顶部有一个tab选择框,点选某一个tab的时候切换页面,并且支持手势滑动,左滑右滑可以同点选tab一样切换页面. 根据项目中选用的ui组件cube-ui为基准查看了一下可实现 ...
java后台中判断PC端/手机web端访问，并返回相应页面
这个代码其实不是由我本人发现的,而是在翻看公司项目时无意间发现,觉得很实用所以拿出来大家分享. 框架:Struts2+spring+ibatis, 主要实现是依靠Http请求头Header中的 &qu ...
web端测试经验（项目实战经验）
软件测试相信大家已经有一定的了解了,无非就是找bug 找缺陷找问题找这个程序(前端.后端)的不足点以及不人性化的地方 ,由我们监测并提出有效的建议给项目进行缺陷修复以及优化点.软件测试大体分为W ...
【新知实验室-TRTC开发】实时音视频之web端云监工系统（Vue3+Element plus+TS+Pinia）
在线上线下一体化.虚拟现实加速融合的趋势下,音视频已经演进成一种基本能力,深刻变革了社会的交互方式.未来,音视频作为全真互联时代的重要基石,将持续推动互联网和实体产业的数字化创新与升级. 今天我们将体 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
H5分享页面（1）——web端二次分享配置内容
在H5分享页面中,如果用户进行了二次分享,需要进行一些配置才能进行使用,如微信二次分享就必须调用微信的JS-SDK来完成.下面对分享配置代码进行了封装: 存放路径:public/resources/j ...

H5、web端页面的性能测试案例以及页面性能测试分析

本文整理于小强测试帮微信公共号

1页面性能测试概述

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

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

4测试范围

5 测试结果与分析

H5、web端页面的性能测试案例以及页面性能测试分析相关推荐

最新文章

热门文章