某网站前端页面性能测试

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

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

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

原文地址：http://blog.51cto.com/xqtesting/2095810

时间： 2024-10-13 20:01:01

某网站前端页面性能测试的相关文章

ASP.NET网站前端页面的复制

网络普及的时代,遇到问题的首要解决方案并不是问人,而是找度娘.当我们找一些技术性的问题时,会发现很多解决方案在博客里,看看博主发表的博客总是惊叹不已,想要自己也有这么一个好习惯,把学到的东西以自己的方式记录下来,下次用到类似的问题直接翻自己的博客岂不是更好,不需要再重新百度了:然而,我只是想想,相信同辈的小伙伴们和我是一样的,思想上的巨人,行动上的矮子.于是,今天良心发现,想要从今天开始记录自己的所感所悟,希望养成这样的一个好习惯. 然而把这一页放在.NET的分类下,是想要分享自己的一个小本领(

四: 使用vue搭建网站前端页面

---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录      cd   目录路径/ 目录名 创建项目          vue init webpack  项目名 效果: 项目文件结构:及作用 -- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client

网页前端页面加载性能测试各工具可行性方案分析

网页前端页面加载性能测试各工具可行性方案分析 征对各个浏览器和工具做了测试,之所以选择的是百度首页测试,因为其比较单一,没有多层嵌套和持续加载,尽量减少其他影响,测试中发现目前有些方案是不可行的,后面征对各个测试结果给出了可行方案和不可行的建议. 1 .webbrowser(内核IE10)和IE10浏览器的比较: Webbrowser的测试方法为,先执行清除浏览器缓存,从开始导航开始计时,DocumentCompleted时间将2次触发,取最后一次的时间,按照DocumentCompleted解

网站开发（周五）：项目前端页面开发（实战）

第一.前端基础简介 前端网页:根据此前项目需求分析可知,我们需要开发网站首页.文章分类页.搜索页.正文页.标签页,而一个最基本网页模版有三部分,网页顶部导航条.网页中部主体.网页底部,其中顶部和底部布局固定,中部展示内容每张网页不同. 网页代码:我们知道,网页模板的基本代码的顶部和底部相同,主要中部主体在变化. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

京东前端：PhantomJS 和NodeJS在网站前端监控平台的最佳实践

1. 为什么需要一个前端监控系统 通常在一个大型的 Web 项目中有很多监控系统,比如后端的服务 API 监控,接口存活.调用.延迟等监控,这些一般都用来监控后台接口数据层面的信息.而且对于大型网站系统来说,从后端服务到前台展示会有很多层:内网 VIP.CDN 等. 但是这些监控并不能准确地反应用户看到的前端页面状态,比如:页面第三方系统数据调用失败,模块加载异常,数据不正确,空白开天窗等. 相关厂商内容 Native动态化最新技术解析 不可错过的智能时代的大前端 性能优化最佳实践经验谈 百度技

用github来展示你的前端页面吧

前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先利其器.github是一个很好的代码管理与协同开发平台,在程序界又被称为最大的"同性交友网站".如果你不懂git,没有自己的github账户,那你就丢失了一把能够很好的展示自我,储存知识的利器. 当然知道github的人不在少数,但是大部分人可能仅知道它可以用于管理我们的项目代码,而不知道

页面性能测试

一.页面性能测试概述   页面性能测试则是针对于页面性能优化而开展的一种性能测试,目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议,最终提升系统的整体性能表现,提高用户体验满意度.可见,Web系统页面性能测试是相对Web系统后台测试的另外一种性能测试,是Web系统性能测试的一个重要部分.   二.页面性能测试必要性   相对于C/S架构的应用系统,Web应用系统所有数据都需要从服务器端下载,虽然浏览器有缓存机制,但客户每次访问仍然需要下载大量的数据.

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,

移动平台3G手机网站前端开发布局技巧

本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的 惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括 WEB.Mobile).但是