8.7 前端页面性能测试_Yslow评分项详解及优化建议

[vieyahn2017]

前端页面性能测试_Yslow评分项详解及优化建议
http://3ms.huawei.com/hi/group/2026947/wiki_3243505.html

[vieyahn2017]

摘要：1、 Yslow简介 YSlow显示前台web页性能测试结果的分析,分为等级、组件、统计信息。等级视图显示了网页的成绩单，整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。鉴于对yslow评分项、及对应优化措施不太了解，本文取花粉俱乐部‘论坛’页举例，整理几个得分较低的评分项。 2、 花粉‘论坛’页Yslow得分规则

[vieyahn2017]

1、 Yslow简介

YSlow显示前台web页性能测试结果的分析,分为等级、组件、统计信息。等级视图显示了网页的成绩单，整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。鉴于对yslow评分项、及对应优化措施不太了解，本文取花粉俱乐部‘论坛’页举例，整理几个得分较低的评分项

[vieyahn2017]

2、 花粉‘论坛’页Yslow得分规则
——http://cn.club.vmall.com/forumall-1.html

[vieyahn2017]

3、 Yslow等级评分项

3.1 Make fewer HTTP requests

从截图可直接看出yslow已经统计当前页面存在多个分散元素，建议将资源合并，减少资源的数目。CSS文件尽量外连，并合并到一个.css文件中，不同的用途之间可以用注释分隔符隔开区分。js文件同样是，图片可以采用CSS Sprites方法将小图合并到一张大图中，利用css定位，根据需要显示大图中的部分图像，从而缩短前端响应时间。

[vieyahn2017]

3.2 Use a Content Delivery Network (CDN)

CDN即：内容分布网络，目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络"边缘"的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。

通过Yslow插件直接过滤当前页面137个静态内容没有添加CDN，提供添加入口。

更多CDN原理解析可以访问：http://www.51know.info/system_performance/cdn/cdn.html

[vieyahn2017]

3.3 Add Expires headers

Add Expires headers是给静态组件配置过期响应头，就是向文档添加一个有效期，告诉浏览器这个文档的有效性和持久性。如果已有缓存，文档就可以从浏览器中的缓存(除已经过期)而不是从服务器读取。接着，客户端验证缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。Yslow插件已经统计当前页有19个静态内容未使用该优化，为加快网站速度，建议考虑。

[vieyahn2017]

3.4 Compress components with gzip

通过Yslow插件检测当前页面存在4个纯文本组件可以压缩，gzip的压缩率非常高，通常可以高达70%，可以明显提高浏览速度。

[vieyahn2017]

3.5 Avoid CSS expressions

CSS表达式是一种有力的（同时也很危险的）动态设置CSS属性的方法。从IE5开始支持CSS表达式。比如，使用CSS表达式可以实现背景颜色每小时变换的效果。表达式方法采用了Javascript的表达。CSS属性则被设为Javascript表达式的结果。其它的浏览器会忽略CSS表达式，所以对于设置专属IE的属性以便在不同浏览器间能有一致的体验是有用的。而CSS表达式的问题是它比大多数人期望的执行次数更频繁。表达式不仅仅在页面展现和重新设置大小的时候执行，在页面滚动，甚至用户在页面上挪动鼠标时都会执行。给CSS表达式添加一个计数器可以跟踪CSS在什么时候和怎样执行。在页面上移动鼠标可以轻易的产生一万次以上的执行。

使用一次性的表达式是减少CSS表达式的执行次数的一个方法，当表达式第一次执行时，CSS表达式会被一个确定的值代替。如果在页面生命周期中，样式属性必须动态的设定，使用事件处理替代CSS表达式是一个可选的方法。

[vieyahn2017]

3.6 Reduce DNS lookups

Reduce DNS Lookups——减少DNS的查询。浏览器链接的DNS解析器会返回服务器的IP地址。域名解析会耗费一些时间，DNS查找给定域名的IP地址一般会耗费20-120毫秒。在DNS查找结束前，浏览器不会从目标域名那里下载任何东西。DNS查询会被缓存以便优化性能。大部分浏览器有它们自己的缓存，与操作系统的缓存相独立。当浏览器在自己的缓存里保存了DNS的记录，它不会向操作系统发出请求记录的要求。IE默认缓存DNS查询30分钟，在注册表的DnsCacheTimeout的键值中设定。Firefox则缓存DNS查询一分钟，在配置network.dnsCacheExpiration 中设定。（Fasterfox 将它变为一小时。）

当客户端的DNS缓存被清空（包括浏览器和操作系统的缓存），DNS查询的数量等同于网页中单独的域名的数量。包括页面中的链接，图片，脚本文件，样式表，Flash对象等。减少不同域名的数量则会减少DNS查询的数量。减少不同域名的数量可能减少页面并行的下载数量。减少DNS查询缩短了响应时间，但减少了并行下载数也许会增加响应时间。Yslow检测建议将组件分布在两到四个域名之间。这能很好的折中减少DNS查询提高的速度和维持较高水平的并行下载的效果。

[vieyahn2017]

3.7 Avoid URL redirects

Avoid URL redirects——避免URL重定向。由于一些现象服务器会返回301或302的状态码，浏览器会重新发起一次请求，这些额外的请求无疑浪费了加载时间。

[vieyahn2017]

3.8 Reduce the number of DOM elements

Reduce the number of DOM elements——减少DOM元素的数目。Yslow插件统计当前页面存在1653个DOM元素，为提高页面加载速度，尽量减少DOM元素个数。几个方面建议：

1） 避免不正确地使用服务器开发控件；

2） 避免不必要的内容；

3） 如果数据量大，可以考虑分页，或者按需加载。

[vieyahn2017]

3.9 Use cookie-free domains

Use cookie-free domains——使用Cookie的免费域名。在请求下载静态小图片、静态小文件的时候，浏览器会把它当成普通请求一样，在request的header信息里附加cookie信息。但实际上，99.99%的静态小图片、静态小文件都不需要知道任何cookie信息。如果每个header都附加1kB的cookie，那么对于一个有50个小文件的网页来讲，就白白增加了50kB的传输量。

为了避免让浏览器发送无用的cookie信息，在服务器端做设置都是没有用的，因为这浏览器端主动发送的。只有通过使用另一个不存在cookie的域名，才能让浏览器不发送cookie信息。php在默认情况下，会给当前的域名，如：example.com域名设置cookie，这种情况下，只要把静态文件放在static.example.com这样的子域名上就可以让浏览器不发送cookie了。但是如果php设置了泛域名的cookie，比如.example.com，那么二级域名是没有用的，必须采用另一个顶级域名，才能避免cookie发送。