FIREBG和YSLOW对于页面加载效率分析的分享.doc

FIREBUG和YSLOW对于页面加载效率分析的分享 一、安装 首先需要确认已经安装了FIREFOX浏览器，然后通过浏览器中“工具”选择“附加组件”，通过附件组件有哪些信誉好的足球投注网站到相应的两个安装插件。具体见下图1： 图1 二、FIREBUG对于页面加载效率的使用 第一、成功安装完两个组件，并重新启动了FIREFOX浏览器后，需要打开FIREBUG来检测王爷打开时的耗时情况。具体如图2： 图2 第二、在浏览器下方的FIREBUG窗体中选择“网络”，并且在URL中输入你想要监控的页面的加载效率，例如键入： HYPERLINK 。具体见图3 。具体见图3： 图3 网络下方默认的选项是“所有”，它包括五个部分的加载，分别是：HTML,CSS,JS,XHR,图片，FLASH。只要所输入的页面中包含该加载项，就会被成功的记录下来，可以选中不通的选项来观察其加载情况，具体见下面几个图： 图4 图5 图6 图7 由于 HYPERLINK 中不包含“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是组件视图，可以得知该页面是由哪几部分组建组成，下面还以 HYPERLINK 为例。见下图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将运行在网页上所有的图片组成，可以得到哪些图像可以被优化，并创建一个压缩文件来优化图像