文档章节

网站性能

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
临阵磨枪,血拼季网站优化的最后三板斧

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

OneAPM蓝海讯通
2015/12/01
90
0
12 个最好的免费网站速度和性能测试工具

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

oschina
2014/03/25
9.4K
16
不同视角下的网站性能

1. 用户是角度网站性能 从用户角度,网站性能就是用户在浏览器上直观感受到的网站响应速度快还是慢。用户感受到的时间,包括用户计算机和网站服务器通信的时间、网站服务器处理的时间、用户计...

李德伦
2014/08/11
208
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

咕泡-Factory设计模式笔记

个人感悟: 设计模式都是处理复杂问题的,如果问题本身很简单,使用设计模式反而累赘,增加了开发的复杂性 遇到最简单的情况,直接 new 如果创建对象的过程简单,但是需要匹配不同情况,返回...

职业搬砖20年
22分钟前
0
0
Java中的锁分类

在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏...

Funcy1122
30分钟前
0
0
Ansible随机数

想为你的Ansible剧本取一个随机数?还想在接下来的运行中保持系统的等幂性?这里有一个答案。 假如,你要为一大批服务器设置cron任务,却不想让它们同时启动,你可以这样设置分钟数: minute...

大别阿郎
39分钟前
0
0
SpringCloud之服务注册中心Eureka

本系列介绍的配置均基于 Spring Boot 2.0.1.RELEASE 版本和 Spring Cloud Finchley.SR1 服务注册中心 Spring Cloud 已经帮我们实现了服务注册中心,我们只需要很简单的几个步骤就可以完成。 ...

熊小飞呀
今天
9
1
“Comparison method violates ...”异常的再现方法

前提条件:JDK8 代码: import java.util.ArrayList;import java.util.Collections;import java.util.Comparator;import java.util.List;public class Test { public stat......

hunterli
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部