通过Yslow工具分析网站熟悉前端性能基本知识

1、Yslow简单介绍

Yslow是雅虎开发的基于网页性能分析浏览器插件，可列出以及网页速度慢的原因，根据高性能网站的规则对网站的性能优化给出合理的建议。

2、Yslow的安装方法

此次介绍的是基于火狐浏览器（Firefox 36以下的版本）yslow3.1.8版，打开Yslow官网（http://yslow.org/）就能看到有四个版本可供选择：火狐（firefox）浏览器、谷歌（chrome）浏览器、欧朋（opera）浏览器和移动版。

但是目前通过Yslow官网点击下载都会提示无法打开网页，可通过此链接进行下载安装使用：http://www.downyi.com/downinfo/36068.html

安装Yslow要先安装 Firebug，两种方法启动Yslow：

（1）打开Firebug窗口，选择Yslow选项。

（2）直接点击火狐右下角的Yslow启动按钮。

点击 Run Test 运行Yslow，也可以点击 Grade, Components, 或Statistics选项开始对页面的分析，如果在 Autorun YSlow each time a web page is loaded 上打上对勾，它将自动对以后打开页面进行分。

图中红框显示的是规则集，YSlow（V2）包含了所有22个测试的规则，YSlow（V1）包含原始13规则，小网站或博客-这个规则集包含14个规则，适用于小型网站或博客，建议对号入座。

3、雅虎评估网站性能的23条军规

雅虎曾经针对网站速度提出了非常著名34条准则：《Best Practices for Speeding Up Your Web Site》。而现在将34条精简为更加直观的23条，并针对每一条给出从F~A的评分以及最终的总分。

而现在23条网站性能优化建议在YSlow的官网首页就能看到，也可以在使用Yslow后，在控制面板里就会给你评分提示，和改进建议。

4、具体分析

（1）Grade(等级视图)—Yslow的第二个选项卡

Yslow给出的网站性能评分，从F~A，A是最好的，通过测试这个H5来看，网站有2处得分最低，上图中的最低分提示：分发网络等级最低。Yslow会根据评分等级给出的都是最优建议

Yslow的建议是由于用户与web服务器的接近程度影响响应时间。跨多个地理位置分散的服务器部署内容有助于用户感知页面加载速度加快。

查看等级为B的HTTP请求的分析

通过分析可知：这个页面有7个外部Javascript脚本。试着把它们组合成一个。

Yslow的建议是：减少页面上的组件数量可以减少呈现页面所需的HTTP请求数量，从而加快页面加载速度。减少组件数量的一些方法包括:组合文件，将多个脚本组合成一个脚本，将多个CSS文件组合成一个样式表，并使用CSS Sprites和图像映射。

我们还可以打开百度的网址进行分析。

从图中可看出：其中应用了10个外部JS、6个CSS文件、7个CSS背景图片。最后给出的建议也是合并这些以达到优化的效果。

通过上面我们可看出此工具给出的优化建议都是合并JS、CSS脚本等等，所以我们可以得出网站页面上的组件过多会影响网页的加载，根据此详细的分析就可以针对性的对其进行优化。

（2）Components（组件视图）—Yslow的第三个选项卡

通过Components考验查看网页各个元素占用的空间大小，例如这个H5页面，有3个images（图片），占用了212.6K，有6个js占用了3436.2K，此项占用比较大。优化项就很明了了，就可以对js进行压缩处理，从而提高网页加载速度。

（3）Statistics（统计信息视图）—Yslow的第四个选项卡

左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出（尤其是我标的红框），这个H5有11个HTTP请求，网页的大小达到1364.2K，意味着打开没打开一个页面几乎需要下载1.4M的东西，而通过使用缓存后我们可以看到效果图片基本靠缓存，而网页的总大小压缩到4.6K。

Statistics这个统计信息视图工具和Components（第三选项卡）一样，只是效果更直观，如果要获得性能优化建议还是要看Grade（第二选项卡）的详细建议。

（4）Tools（辅助工具）—Yslow的第五个选项卡

JSLint：是一个强大的工具，它可以检验HTML代码以及内联的Javascript代码，通过JSLint发现了google analytics上的一个js错误。

ALL JS：查看你这个网页上一共引用了多少JS。

All JS Beautified：把所有JS放在打开的页面中，利用站长统一检查（我感觉作用不大）。

All JS Minified：同上，但它显示的是压缩过的js代码，如果你要JS优化，它已经给你优化好了，来过来直接用。

All CSS：显示你网页所有CSS文件。

YUI CSS Compressor：显示网页压缩后的CSS文件，也是拿过来可以直接用的。

All Smush.it™：图片在线优化网站，点击它后会自动跳到smushit网站上给你自动优化CSS图片，该网站提供了优化前与优化后的对比，点击直接下载优化后的图片，在覆盖到自己网站上就可以了，强烈推荐。

Printable View：这个是打印用的，部门开会、前端设计师讨论、汇报时使用。

 

5、总结：一般是会有7个方面会影响到前端的性能

（1）Javascript和CSS文件

如果这些文件很大浏览器会下载很长时间。

（2）HTTP请求

每个网站都会有许多HTTP请求，但浏览器只有20%的时间用来加载内容， 80%的时间获取外部元件，包括脚本、样式表、图像等。由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。

（3）缓存图片、CSS和Javascript

用户访问网站时，图片、CSS和Javascript会在其浏览器缓存

（4）CSS引用图片

网站的图片都是切成小块的，这样下来就会有大量CSS引用图片

（5）网页加载全部JS文件

由于网站的组件复杂，而这些加载都会耗费时间，没有按照组件的重要性进行先后排序加载，最后给用户感受就是，页面加载比较慢。

（6）图像未进行合理的压缩

为了让显示效果更好，图片过大，图片大小与质量之间未做好平衡

（7）未开启gzip模块

gzip压缩是一种数据压缩格式，一般网站启用gzip后，压缩率都会有70%-80%的提升，但开启gzip会加重服务器负担，而且要修改服务器配置。