评测网页效率的工具—YSlow

[转]评测网页效率的工具—YSlow

本文转自：http://www.yuloo.com/news/2008-06-04/89192.html

YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。因此说YSlow是一款基于FireFox插件的插件。虽然有点绕，可是最终说明的问题是：

　　很遗憾，微软的IE系列浏览器不能使用YSlow。

　　YSlow只能使用在FireFox浏览器上。

　　若是要想使用YSlow，那么你必须先安装FireFox。

　　若是要想使用YSlow，那么你就要安装FireFox上的Firebug插件。

　　这看上去好像有点使人沮丧，可是事实上它并不像想象中的那么麻烦，只要按照下面的步骤你将能很快的使用YSlow：

　　到http://www.mozilla.net.cn/firefox/ 下载最新版的FireFox，并安装它。固然若是你已经安装了FireFox能够跳过此步。

　　到https://addons.mozilla.org/en-US/firefox/addon/1843/ 下载最新版的Firebug，并安装它。固然若是你已经安装了Firebug能够跳过此步。

　　到https://addons.mozilla.org/en-US/firefox/addon/5369/ 下载最新版的YSlow，并安装它。固然若是你已经安装了YSlow能够跳过此步。

　　图1：在菜单中先打开Firebug插件这时候打开FireFox，你将在【工具】菜单中看到【firebug】(如图1)。打开firebug，而后在firebug中点击YSlow菜单，便看进入YSlow的主界面(如图2)。

　　图2：在菜单中先打开Firebug插件(点击小图查看完整大图)

　　点击【Performace】菜单

　　YSlow便开始分析此页的效率，并从13个最影响网页效率的方面给出评估(如图4)。

　　图3：YSlow给出的本页面效率评估

　　能够看出来，YSlow评估的依据就是咱们在《如何提升网页的效率(上篇)——提升网页效率的14条准则》中提到的前面13条。前面蓝色的字母表示这一条准备的得分。A最高。点击右面的三角形能够获得更多的信息和建议，有些信息里面还有“放大镜” 图标，点击也将展现更为详细的信息和建议。(如图4所示)

　　图4：YSlow能够给出每条准则的详细评估信息和建议

　　点击【Stats】菜单

　　这个视图会告诉你页面的整体统计信息。包括页面大小、css样式表大小、脚本文件大小、整体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你，哪些东西被缓存了，缓存了多少等等。

　　图5：【Stats】视图信息

　　点击【Components】菜单

　　这个视图是一个页面全部部件的信息列表。从中咱们能够得知每一个部件的各类详细信息。如：类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。经过对这个列表的分析，咱们就能够知道究竟是什么东西最耗费咱们的资源，从而有针对性的进行优化。

　　图6：【Components】视图信息，点击“放大镜”图标咱们能够知道更详细的信息(点击小图查看完整大图)

　　点击【Tools】菜单

　　【Tools】菜单包含4个子菜单，就是4个实用工具。【JSLine】工具会生成JSLine报表，报表是对本网页中JS脚本的分析报告，包含错误和建议。【ALL JS】工具，将生成本页面全部脚本代码便于阅读和打印的报表页面。【ALL CSS】工具，将生成本页面 全部CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。

　　图7：【Tools】菜单，包含了4个子菜单

　　点击【Help】菜单

　　【Help】主要是些经常使用的帮助途径的入口。从这里你能够很方面的访问YSlow的官方网络和博客。若是你还对YSlow的使用有什么疑惑的话，那么在这里你将得到满意的解答。

　　图8：【Help】菜单是些经常使用的帮助入口