文档章节

网站性能

0000001
 0000001
发布于 2014/05/29 14:57
字数 1455
阅读 222
收藏 28

Web页面性能测试工具浅析

来源:foOol

做Web开发,难免要对自己开发的页面进行性能检测,自己写工具检测,工作量太大。网上有几款比较成熟的检测工具,以下就介绍一下,与大家分享。

互联网现有工具

基于网页分析工具:

1.       阿里测

2.   百度应用性能检测中心

2.       Web PageTest

3.       PingDom Tools

4.       GTmetrix

 

基于浏览器分析工具:

1.       Chrome自带工具F12

2.       Firefox插件:YSlow(Yahoo工具)

3.       Page Speed(google)

 

(以下以分析博客园网站为例www.cnblogs.com)

阿里测:

http://www.alibench.com

首页:

一、性能打分

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

 

以上只是粗略介绍,更多详细指标,小伙伴们还是自己去发现吧!


本文转载自:http://binary.duapp.com/2013/10/1529.html

共有 人打赏支持
0000001
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
加载中

评论(3)

0000001
0000001
优化方案一览
0000001
0000001
这几个tools已经集成了Yslow啊
冬芽
冬芽
感觉还是 yslow比较好用, 给出的信息很有用处
测试网页打开速度的18种专业方法

网站的加载速度是决定网站等级的重要因素,值得站长特别关注。原因很简单,没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度 很慢,将流失大量的访客,甚至出现多米诺...

james_laughing
2016/12/14
76
0
Radware最新电商页面与Web性能调查报告

【IT168 资讯】日前,全球领先的虚拟数据中心与云数据中心应用交付和应用安全解决方案提供商Radware公司发布了一份题为“行业现状:2013年秋季电商页面速度与Web性能”的最新调查报告。这是R...

it168网站
2013/10/31
0
0
12 个最好的免费网站速度和性能测试工具

如果你是位个人站长,就能理解网站速度的重要性。自从 Google 算法开始使用网页加载时间作为搜索排序参数之后,网站速度对 SEO 的影响非常大。而且,很慢的加载速度会对网站访问者产生消极的...

oschina
2014/03/25
9.4K
16
临阵磨枪,血拼季网站优化的最后三板斧

【编者按】本文作者 Dennis Callaghan 目前就职于 Callaghan&Partners。本文中,作者分享了购物高峰期提高网站性能的三个建议,帮助电商网站解决性能难题,提升用户体验,由 OneAPM工程师编译...

OneAPM蓝海讯通
2015/12/01
90
0
预示应用性能问题的十大征兆

一年一度的双11、双12全民网购节已经过去,淘宝、天猫及其他电商都迎来了大量用户,但是,你的基础架构能否承载突如其来的流量?面对预期而至的大量用户,容量规划是否到位?线上商城以及后端...

OneAPM蓝海讯通
2015/12/21
13
0

没有更多内容

加载失败,请刷新页面

加载更多

Coding and Paper Letter(三十九)

资源整理。 1 Coding: 1.Python库benchmark rio s3,用于在访问S3上的文件时对Rasterio / GDAL的多线程性能进行基准测试的工具。 benchmark rio s3 2.Pangeo-Binder Cookiecutter模板。 cook...

胖胖雕
32分钟前
1
0
Promise 对象

Promise(承诺) 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供...

简心
34分钟前
0
0
让UI设计师崩溃的瞬间,你经历过哪些?

隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通。流畅的沟通,和声细语,...

mo311
36分钟前
1
0
python进制转换

#进制转换print(bin(10)) #十进制转换成二进制print(oct(10)) #十进制转换成八进制print(hex(10)) #十进制转换成十六进制print(int('1010',2)) #二进制转十进制print(int(...

fadsaa
47分钟前
3
0
syntax error near unexpected token

最近不断重复在虚拟机CentOS测试安装gitlab,因为gitlab有一个脚本需要饭强才能下载,于是我先在windows下载好再上传到虚拟机,可是执行脚本的时候提示“syntax error near unexpected toke...

W_Lu
56分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部