浅谈YSlow------前端页面性能测试

YSlow可以对网站的页面进行分析，以及为了提高网站性能，如何基于某些规则而进行优化。

Yslow官网能看到有多个版本可供选择：火狐（FireFox）浏览器、谷歌（chrome）浏览器、欧朋（opera）浏览器和移动版。

基于FireFox的版本，安装YSlow必须首先先安装 Firebug。

YSlow23条规则

      http://yslow.org/

     HOME

      启动YSlow

 Grade(等级视图)

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

Components(组件视图)

 通过components查看网页各个元素占用空间的大小

Statistics（统计信息视图）

左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出（尤其是我标的红框），这个网页93个HTTP请求，网页的大小达到695.1K，而通过使用缓存后我们可以看到效果图片基本靠缓存，而网页的总大小压缩到21.8K。

Tools（辅助工具）

JSLint是一个强大的工具，它可以检验HTML代码以及内联的Javascript代码。

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

All JS Beautified：把所有JS放在打开的页面中，利用站长统一检查。

All JS Minified：同上，但它显示的是压缩过的JS代码。

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

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

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

Printable View：打印视图。

测试通过标准

    参考淘宝性能测试的标准，YSlow评定为C以下认为测试不通过。