FIREBUG和YSLOW对于页面加载效率分析的分享.docx

FIREBUG和YSLOW对于页面加载效率分析的分享
一、安装
首先需要确认已经安装了FIREFOX浏览器，然后通过浏览器中“工具”选择“附加组件”，通过附件组件搜索到相应的两个安装插件。具体见下图1：

图1
二、FIREBUG对于页面加载效率的使用
第一、成功安装完两个组件，并重新启动了FIREFOX浏览器后，需要打开FIREBUG来检测王爷打开时的耗时情况。具体如图2：

图2
第二、在浏览器下方的FIREBUG窗体中选择“网络”，并且在URL中输入你想要监控的页面的加载效率，例如键入：。具体见图3：

图3
网络下方默认的选项是“所有”，它包括五个部分的加载，分别是：HTML,CSS,JS,XHR,图片，FLASH。只要所输入的页面中包含该加载项，就会被成功的记录下来，可以选中不通的选项来观察其加载情况，具体见下面几个图：

图4

图5

图6

图7
由于中不包含“XHR”和“FLASH”就不做截图。
三、YSLOW对于页面加载效率的使用
YSLOW由四部分组成，分别是：Grades,Components.Statistic,Tools.
第一、点击在所需要测试网页加载效率的页面中，点击YSLOW下的“RUNTET”按钮，如下图8：

图8
在点击完“RUNTEST”在GRADE中我们会获得该页面加载的一个等级情况（等级的划分从高到底分别为：A\B\C\D\E\F），具体见下图9：

图9
Grade是相对于整个页面的加载耗时的一个等级情况，还可以在其下方得到各个网页构成要素的各个等级的区分，这个细致的划分能够很好的有助于后期网站优化时的对症下药。如图9中，我们可以得到HTTP REQUEST的等级为F，给程序员的优化建议就是尽可能减少HTTP的请求数，从而可以大大的降低程序员逐个排除时带来的不必要的耗时。
Components是组件视图，可以得知该页面是由哪几部分组建组成，下面还以为例。见下图10，可以得知该页面是由以下几个组建组成：doc、js、css、iframe、cssimage、image。

图10
在图10中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：额外的性能分析。
STATISTIC是统计信息图，具体如下图11所示：

图11
在图11中左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。从图11中可以看到，页面元素缓存后使页面的HTTP请求和页面总大小都减少，从而加快了页面的打开时间。
TOOLS是YSLOW的工具菜单，通过工具菜单，测试可以使用获得的信息区分析网页。具体见下面的图12：

图12
1、JSLint
JSLint收集所有外部和内部的JavaScript从目前的网页，提交给JSLint，一个JavaScript验证，并打开一个单独的窗口来输出一份报告。
2、ALL JS
收集所有外部和内部的JavaScript的网页，并显示在一个单独的脚本窗口。帮助查看某个脚本，以及在实际使用中是否正确。
3、ALL JS Beautified
讲js以人们可读的放松展示
4、ALL JS Minified
收集所有外部和内部JavaScript，删除评论和白色空间以缩小的脚本，从而提高网页的加载性能
5、ALL CSS
收集所有的行内和外部的样式表在网页上，并将其显示在一个单独的窗口。
6、ALL Smush.it
Smush.it将运行在网页上所有的图片组成，可以得到哪些图像可以被优化，并创建一个压缩文件来优化图像