Web页面性能测试工具浅析

 做Web开发,难免要对自己开发的页面进行性能检测,自己写工具检测,工作量太大。网上有几款比较成熟的检测工具,以下就介绍一下,与大家分享。
互联网现有工具
  基于网页分析工具:
  1.阿里测
2.百度应用性能检测中心
2.Web PageTest
3.PingDom Tools
4.GTmetrix
基于浏览器分析工具:
  1.Chrome自带工具F12
2.Firefox插件:YSlow(Yahoo工具)
3.Page Speed(google)
(以下以分析博客园网站为例)

  首页:
一、性能打分







  a)首字节时间
  指标解释:浏览器开始收到服务器响应数据的时间(后台处理时间+重定向时间)
评估方法:达标时间=DNS解析时间+创建连接时间+SSL认证时间+100ms. 比达标时间每慢10ms减1分.
b)使用长连接(keep alive)
  指标解释: 服务器开启长连接后针对同一域名的多个页面元素将会复用同一下载连接(socket)
评估方法:服务器是否返回了"Connection: keep-alive"HTTP响应头,或者浏览器通过同一连接下载了多个对象
c)开启GZIP压缩
  指标解释:仅检查文本类型("text/*","*javascript*")
评估方法:服务器是否返回了"Transfer-encoding: gzip"响应头。假如全部压缩就是满分,否则:得分=满分x(100%-全部gzip后节省的比例%)
 d)图片压缩

  评估方法:
对于GIF - 略过
对于PNG - 必须是8位或更低
对于JPEG - 对比使用photoshop质量选择50后的图片,尺寸超出10%以内及格,10%-50%警告,50%以上不达标
得分=满分x(100%-图片重新压缩后可以节省的比例%)
e)设置静态内容缓存时间
  指标解释:css,js,图片资源都应该明确的指定一个缓存时间
评估标准:如果有静态文件的过期时间设置小于30天,将会得到警告
 f)合并css和js文件
  指标解释:合并js和css文件可以减少连接数
评估方法:每多一个css文件减5分,每多一个js文件减10分
g)压缩JS
  指标解释:除了开启gzip,使用js压缩工具可以进行代码级的压缩
评估方法:js文件会通过jsmin压缩.如果原始文件gzip过,jsmin处理过的文件也会gzip后再进行对比.如果能节省>5KB或者%10的尺寸,评估失败.如果能节省>1KB同样会收到警告.
h)合理使用cookie
  指标解释:cookie越小越好,而且对于静态文件需要避免设置cookie
评估方法:只要对静态文件域设置了cookie,评估失败. 对于其他请求,cookie尺寸过大会得到警告.

  二、详情分析

  i)首次探测(首次探测会清空DNS缓存和浏览器缓存),重复探测(保留首次探测的缓存,进行再次探测)。
j)页面加载时间:从页面开始加载到页面onload事件触发的时间。
k)首字节时间:从开始加载到收到服务器返回数据的第一字节的时间。
l)开始渲染时间:从开始加载到浏览器开始渲染第一个html元素的时间。
m)Speed index:
n)元素个数:页面中包含的所有DOM节点个数
o)页面加载(包括加载时间,请求数,下载总计):从页面开始加载到onload事件触发这个时间段内的统计数据,一般来说onload触发代表着直接通过HTML引用的CSS,JS,图片资源已经完全加载完毕。
p)完全加载:随着ajax应用的流行,很多资源都会通过JS脚步异步加载,所以onload事件并不意味着完全加载,onload之后js可能依然在异步加载资源。完全加载的定义是:页面onload后2秒内不再有网络请求时刻。
q)元素瀑布图:通过元素瀑布图可以很直观得到以下信息。

  i.资源的加载顺序。
ii.每个资源的排队延迟,加载过程。
iii.加载过程中CPU和贷款的变化曲线。
iv.统计出出错请求、大图片请求、onload之后的请求、开始渲染之前的请求、首字节较慢的请求及DNS解析较慢的请求个数。
r)连接视图展现了页面加载过程中创建的(keep-alive)连接,以及通过每个连接所加载的资源。

  三、元素分布

  s)资源类型统计:css,html,image,js,other(请求数,大小)
t)资源域名统计:请求域名个数及次数
 四、视图分析







  将整个网页生成的过程以胶片视图、视频、截屏的形式展现出来,并提供详细的状态栏加载日志。
  YSlow:
  火狐插件(自行安装)
  评分等级指标:
  1.确保少量的HTTP请求(合并JS,CSS图片等)
  2.使用内容分发CDN
  3.设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
  4.使用gzip压缩
  5.将CSS放置html头部
  6.将JavaScript放置底部
  7.Avoid CSS expressions
  8.使用外部引用JavaScript与CSS
  9.减少DNS解析
  10.压缩JavaScript和CSS
  11.避免URL重定向。URL redirects are made using HTTP status codes 301 and 302. They tell the browser to go to another location.
  12.删除重复JavaScript和CSS
  13.设置ETags   






最新内容请见作者的GitHub页:http://qaseven.github.io/

  

时间: 2024-08-07 03:46:39

Web页面性能测试工具浅析的相关文章

页面性能测试之一

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

页面性能测试

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

一个Web页面的问题分析

几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更可维护的代码,就是这篇文章要阐述的内容. 首先我查看了该Web页面的HTML代码,发现了一些典型的问题: HTML页面中包含了很多Javascript和CSS代码 HTML页面中引用了大量的外部Javascript文件和CSS文件 接下来就这些问题,我们逐个讨论一下: HTML页面中包含了很多Javascript和CSS代码

Web网站的性能测试工具

随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况,因此,当Web网站遇到访问高峰时,容易发生服务器响应速度变慢甚至服务中断.为了避免这种情况,需要一种能够真实模拟大量用户访问Web应用系统的性能测试工具进行压力测试,来测试静态HTML页面的响应时间,甚至测试动态网页(包括ASP.PHP.JSP等)的响应时间,为服务器的性能优化和调整提供数据依据. 我推荐各位Web 2.0开发测试人员使用Micr

高性能WEB开发:web性能测试工具推荐

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 WEB性能测试工具主要分为三种,一种是测试页面资源加载速度的,一种是测试页面加载完毕后页面呈现.JS操作速度的,还有一种是总体上对页面进行评价分析,下面分别对这些工具进行介绍,如果谁有更好的工具也请一起分享下. Firebug: Firebug 是firefox中最为经典的开发工具,可以监控请求头,响应头,显示资源加载瀑布图: HttpWat

高效的 web 性能测试工具OpenSTA使用详解

概述 随着 Web 应用技术的发展和 Web 应用程序的迅速普及,Web 系统的性能和服务质量显得越来 越重要.性能测试在软件的质量保证中起着越来越重要的作用.性能测试是通过自动化的测试工具模拟多种正 常.峰值以及异常负载条件来对系统的各项性能指标进行测试.性能测试是一种信息的收集和分析的过程,测 试过程中通过收集的数据用来预测怎样的负载水平将耗尽系统资源.性能测试保证程序具有良好的性能,它考 察在不同的用户负载下,Web 对用户请求做出的相应情况,以确保将来系统运行的安全性.可靠性和执行效率

了解WEB页面工具语言XML(五)好处_XML/RSS

五.XML带来的好处 1更有意义的搜索 数据可被XML唯一的标识.没有XML搜索软件必须了解每个数据库是如何构建的.这实际上是不可能的因为每个数据库描述数据都是不同的.有了XML书就可以很容易以标准的方式按照作者.标题.ISBN序号或其他的标准分类.搜索书就变得十分方便. 2开发灵活的Web应用软件 数据一旦建立XML能被发送到其他应用软件.对象或者中间层服务器做进一步地处理.或者它可以发送到桌面用浏览器浏览.XML和HTML.脚本.公共对象模式一起为灵活的三层Web应用软件的开发提供了所需的技

FunkLoad 1.16.1发布 web性能测试工具

FunkLoad是一个功能和负载的Web测试仪,主要的用于Web项目(进行回归测试),http://www.aliyun.com/zixun/aggregation/14356.html">性能测试,负载测试(如音量的测试或寿命测试),压力测试的功能.它也可以用来编写Web代理脚本的任何Web重复性的任务. FunkLoad 是一个网站项目的功能.性能测试工具. FunkLoad 1.16.1此版本带有一个新的监测插件系统.您可以定义您自己的显示器代理类似Munin或Nagios的使用.现

雅虎开源解析 HTML 页面数据的 Web 爬取工具 Anthelion

Yahoo 宣布开源解析 HTML 页面结构数据的 Web 爬取工具 Anthelion. Web 爬行工具是 Yahoo 很重要的核心,甚至超过了其他应用: Yahoo Mail, Yahoo Finance, Yahoo Messenger, Flickr 和 Tumblr. 上一年在上海的一次会议中,Yahoo 也详细提到了 Anthelion:"Anthelion 最初专注于语义数据,使用标记语言嵌入到 HTML 页面,比如 Microdata,Microformat 或者 RDFa.&