前端性能测试工具安装及说明

YSLOW安装：

1、安装插件：

2、右上角选择从文件安装；

3、重启：

三、使用：

1、重启后，打开任意一个网页，按F12键就可以呼出firebug插件，选择Yslow标签，点击“Run Test”就可以快速对此网页进行测试了；

        YSlow(V2) Ruleset：包含了所有22个测试的规则

　　Classic(V1) Ruleset：YSlow （V1）包含原始13规则

       Small Site or Blog Ruleset：小网站或博客规则集，包含14个规则，适用于小型网站或博客

 如果页面与某一规则无关，则线束N/A，表示不适用。

点击每一规则，都显示改进建议。

 2、通过Components考验查看网页各个元素占用的空间大小

组件检视表：

TYPE：该组件的类型。该网页是由组成部分的下列类型： doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB)：该组件的大小以千字节。

GZIP(KB)：该组件的gzip压缩的大小以千字节。

COOKIE RECEIVED(bytes)：字节数在HTTP设置的Cookie响应头。

COOKIE SENT(bytes)：节数的Cookie在HTTP请求报头

HEADERS：HTTP信息头，点击放大镜查看全面信息。

URL：链接地址

EXPIRES(Y/M/D)：日期的Expires头，属于缓存设置一种。

RESPONSE TIME (ms)：响应时间

ETAG：ETag响应头，也是缓存设置的一种

ACTION：额外的性能分析

3、通过Statistics（统计信息视图）

左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。

 从图中可以直观的看出（标的红框），这个网页14个HTTP请求，网页的大小达到443.4K

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

4、tools

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：这个是打印用的，部门开会、前端设计师讨论、向老板汇报时估计用的上。