如何提高网页的效率（下篇）——Use YSlow to know why your web Slow

saybody

浏览: 911390 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

<p>
</p>
<div class="floatRPic">
<a title="你的网页太臃肿" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="你的网页太臃肿！" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/fatfat.jpg" longdesc="这是一张表现臃肿,胖子,减肥的图片"></a><br>
图:你的网页太臃肿了！</div>
网站最重要的东西是什么？<br>
——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！<br>
内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系，需要进一步的确认，此为和上篇保持统一)； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。

<p>所以网页的效率绝对是最值得关注的方面。虽然我们在<a title="《如何提高网页的效率（上篇）——提高网页效率的14条准则》" href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html" target="_blank"> 《如何提高网页的效率（上篇）——提高网页效率的14条准则》</a>提到了如何提高网页效率的14条准则，但是如何知道我们现在的网页的效率到底如何？到底处于怎样一个级别？又有哪些方面做的不够好，需要改进呢？也许，你会说，问一下用户不就知道了吗？但是相比感性比例占据太大的用户感受而言，理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow（why slow，这个名字起的太好了）。
</p>
<div class="floatRPic">
<a title="yslow,yslow Logo" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="yslow,yslow Logo" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslowlogo.png"></a><br>
yslow</div>

<p><a title="YSlow" href="http://developer.yahoo.com/yslow/" target="_blank">YSlow</a>是由<a title="Yahoo开发者团队" href="http://developer.yahoo.com/" target="_blank">Yahoo开发者团队</a>发布的一款基于Firebug的插件。而<a title="Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/5369" target="_blank">Firebug</a> 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕，但是最终说明的问题是：
</p>
<ul style="margin: 10px 0px 0px 15px;">
<li>很遗憾，微软的IE系列浏览器不能使用YSlow。
    </li>
<li>YSlow只能使用在FireFox浏览器上。
    </li>
<li>如果要想使用YSlow，那么你必须先安装FireFox。
    </li>
<li>如果要想使用YSlow，那么你就要安装FireFox上的Firebug插件。 </li>
</ul>
<p>这看上去好像有点令人沮丧，但是事实上它并不像想象中的那么麻烦，只要按照下面的步骤你将能很快的使用YSlow：
</p>
<ol style="font-size: 10pt; margin-left: 2em;">
<li>到<a href="http://www.mozilla.net.cn/firefox/">http://www.mozilla.net.cn/firefox/</a><a href="http://www.mozilla.net.cn/firefox/" target="_blank"><img alt="在新窗口打开此链接" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/outLink.gif"></a> 下载最新版的FireFox，并安装它。当然如果你已经安装了FireFox可以跳过此步。
    </li>
<li>到<a href="https://addons.mozilla.org/en-US/firefox/addon/1843/">https://addons.mozilla.org/en-US/firefox/addon/1843/</a><a href="https://addons.mozilla.org/en-US/firefox/addon/1843/" target="_blank"><img alt="在新窗口打开此链接" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/outLink.gif"></a> 下载最新版的Firebug，并安装它。当然如果你已经安装了Firebug可以跳过此步。
    </li>
<li>到<a href="https://addons.mozilla.org/en-US/firefox/addon/5369/">https://addons.mozilla.org/en-US/firefox/addon/5369/</a><a href="https://addons.mozilla.org/en-US/firefox/addon/5369/" target="_blank"><img alt="在新窗口打开此链接" src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/outLink.gif"></a> 下载最新版的YSlow，并安装它。当然如果你已经安装了YSlow可以跳过此步。 </li>
</ol>
<p>
</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com"><img height="355" alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow01.jpg" width="514"></a><br>
图2：在菜单中先打开Firebug插件</div>
这时候打开FireFox，你将在【工具】菜单中看到【firebug】（如图2）。打开firebug，然后在firebug中点击YSlow菜单，便看进入YSlow的主界面（如图3）。<br><div class="floatMPic">
<a title="点击小图查看完整大图" href="pic/02.jpg" target="_blank"><img height="248" alt="点击小图查看完整大图" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow02.jpg" width="620"></a><br>
图3：在菜单中先打开Firebug插件(点击小图查看完整大图)</div>

<h4>点击【Performace】菜单</h4>
<p>YSlow便开始分析此页的效率，并从13个最影响网页效率的方面给出评估（如图4）。
</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com"><img alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow03.jpg"></a><br>
图4：YSlow给出的本页面效率评估</div>

<p>可以看出来，YSlow评估的依据就是我们在<a title="《如何提高网页的效率（上篇）——提高网页效率的14条准则》" href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html" target="_blank"> 《如何提高网页的效率（上篇）——提高网页效率的14条准则》</a>中提到的前面13条。前面蓝色的字母表示这一条准则的得分。A最高。点击右面的三角形可以得到更多的信息和建议，有些信息里面还有“放大镜” 图标，点击也将展示更为详细的信息和建议。（如图5所示）
</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com"><img alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow09.jpg"></a><br>
图5：YSlow可以给出每条准则的详细评估信息和建议</div>

<h4>点击【Stats】菜单</h4>
<p>这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你，哪些东西被缓存了，缓存了多少等等。
</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com"><img alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow10.jpg"></a><br>
图6：【Stats】视图信息</div>

<h4>点击【Components】菜单</h4>
<p>这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的各种详细信息。如：类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析，我们就可以知道到底是什么东西最耗费我们的资源，从而有针对性的进行优化。
</p>
<div class="floatMPic">
<a title="firefox,firebug,yslow" href="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow11.jpg"><img height="337" alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow11.jpg" width="620"></a><br>
图7：【Components】视图信息，点击“放大镜”图标我们可以知道更详细的信息（点击小图查看完整大图）</div>

<h4>点击【Tools】菜单</h4>
<p>【Tools】菜单包含4个子菜单，就是4个实用工具。【JSLine】工具会生成JSLine报表，报表是对本网页中JS脚本的分析报告，包含错误和建议。【ALL JS】工具，将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具，将生成本页面所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。
</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com"><img alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow12.jpg"></a><br>
图8：【Tools】菜单，包含了4个子菜单</div>

<h4>点击【Help】菜单</h4>
<p>【Help】主要是些常用的帮助途径的入口。从这里你可以很方面的访问YSlow的官方网络和博客。如果你还对YSlow的使用有什么疑惑的话，那么在这里你将获得满意的解答。
</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com"><img alt="firefox,firebug,yslow" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/yslow13.jpg"></a><br>
图8：【Help】菜单是些常用的帮助入口</div>

<h4>后记</h4>
<p>“工欲善其事，必先厉其器！”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”，估计也没有几个人怕他。好的工具是一方面，但是更重要的还是提高我们自身的知识水平。就如同这款YSlow，如果没有<a title="《如何提高网页的效率（上篇）——提高网页效率的14条准则》" href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html" target="_blank"> 《如何提高网页的效率（上篇）——提高网页效率的14条准则》</a>中的理论知识，工具提供的信息我们看到的可能只是表面，就算看懂了数据，我们也很难知道对应的手段和措施。壮汉拿厉斧，这样伐木才能又快又轻松。 </p>
<h4>关于本文的讨论</h4>
<a title="博客园【web标准设计小组】" href="http://space.cnblogs.com/group/topic/360/" target="_blank">博客园【web标准设计小组】关于本文的讨论</a>
<hr align="left" width="80%">
Tag标签:<span style="font-size: 80%; color: #666;">yslow,yslow使用,yslow教程,网页打开速度慢,开网页速度慢,网页速度慢,网页打开速度很慢,网页打开速度,提高网页浏览速度,浏览网页速度慢,网页打开速度太慢,打开网页的速度慢,如何提高网页的效率,如何提高效率</span>

分享到：