?? 如何提高網(wǎng)頁的效率(下篇).htm
字號:
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0085)http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html -->
<HTML><HEAD id=Head><TITLE>如何提高網(wǎng)頁的效率（下篇）——Use YSlow to know why your web Slow - Yes! B/S ! - 博客園</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META id=metaKeywords
content="如何提高網(wǎng)頁的效率（下篇）——Use YSlow to know why your web Slow" name=keywords><LINK
id=MainCss href="如何提高網(wǎng)頁的效率(下篇).files/style.css" type=text/css
rel=stylesheet><LINK id=SecondaryCss href="如何提高網(wǎng)頁的效率(下篇).files/customcss.css"
type=text/css rel=stylesheet><LINK id=RSSLink title=RSS
href="http://www.cnblogs.com/JustinYoung/rss.aspx" type=application/rss+xml
rel=alternate>
<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>
<BODY>
<FORM id=Form1 name=Form1 onsubmit="javascript:return WebForm_OnSubmit();"
action=speeding-up-web-site-yslow.html method=post>
<DIV><INPUT id=__EVENTTARGET type=hidden name=__EVENTTARGET> <INPUT
id=__EVENTARGUMENT type=hidden name=__EVENTARGUMENT> <INPUT
id=" __VIEWSTATE" type=hidden name=__VIEWSTATE> </DIV>
<SCRIPT type=text/javascript>
<!--
var theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</SCRIPT>
<SCRIPT src="如何提高網(wǎng)頁的效率(下篇).files/WebResource.axd" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript>
function ctlent(evt,id)
{
if(evt.ctrlKey && evt.keyCode == 13)
{
try
{
TempSave(id);
}
catch(ex)
{
}
finally
{
__doPostBack('AjaxHolder$PostComment$btnSubmit','')
}
}
}</SCRIPT>
<SCRIPT language=JavaScript>function SetReplyAuhor(author){document.getElementById('AjaxHolder_PostComment_tbComment').value+="@"+author+"\n";document.getElementById('AjaxHolder_PostComment_tbComment').focus();return false}</SCRIPT>
<SCRIPT src="如何提高網(wǎng)頁的效率(下篇).files/ScriptResource.axd"
type=text/javascript></SCRIPT>
<SCRIPT
src="C:\Documents and Settings\Administrator\桌面\如何提高網(wǎng)頁的效率(下篇).files\ScriptResource(1).axd"
type=text/javascript></SCRIPT>
<SCRIPT
src="C:\Documents and Settings\Administrator\桌面\如何提高網(wǎng)頁的效率(下篇).files\ScriptResource(2).axd"
type=text/javascript></SCRIPT>
<SCRIPT src="如何提高網(wǎng)頁的效率(下篇).files/js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->
</SCRIPT>
<!--done-->
<DIV id=header><!--done-->
<DIV class=header>
<DIV class=headerText><A class=headermaintitle id=Header1_HeaderTitle
href="http://www.cnblogs.com/JustinYoung/">Yes! B/S !</A><BR>JustinYoung's Blog
</DIV></DIV></DIV>
<DIV id=mytopmenu>
<DIV id=mylinks><!--done--><A class=menu id=MyLinks1_HomeLink
href="http://www.cnblogs.com/">博客園</A> <A class=menu
id=MyLinks1_MyHomeLink href="http://justinyoung.cnblogs.com/">首頁</A>
<A class=menu id=MyLinks1_NewPostLink
href="http://www.cnblogs.com/JustinYoung/admin/EditPosts.aspx?opt=1">新隨筆</A> <A
class=menu id=MyLinks1_ContactLink
href="http://www.cnblogs.com/JustinYoung/contact.aspx?id=1">聯(lián)系</A>
<A class=menu id=MyLinks1_Syndication
href="http://www.cnblogs.com/JustinYoung/rss">訂閱</A><A id=MyLinks1_XMLLink
href="http://www.cnblogs.com/JustinYoung/rss"><IMG
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px"
alt=訂閱 src="如何提高網(wǎng)頁的效率(下篇).files/xml.gif"></A> <A class=menu
id=MyLinks1_Admin
href="http://www.cnblogs.com/JustinYoung/admin/EditPosts.aspx">管理</A> </DIV>
<DIV id=mystats><!--done-->隨筆-108 評論-1148 文章-223 trackbacks-87
</DIV></DIV>
<DIV id=centercontent>
<SCRIPT type=text/javascript>
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90);
//]]>
</SCRIPT>
<!--done-->
<DIV class=post>
<DIV class=postTitle><A class=postTitle2 id=AjaxHolder_ctl01_TitleUrl
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html">如何提高網(wǎng)頁的效率（下篇）——Use
YSlow to know why your web Slow</A> </DIV>
<P></P>
<DIV class=floatRPic><A title=你的網(wǎng)頁太臃腫 href="http://justinyoung.cnblogs.com/"
target=_blank><IMG alt=你的網(wǎng)頁太臃腫！ src="如何提高網(wǎng)頁的效率(下篇).files/fatfat.jpg"
longDesc=這是一張表現(xiàn)臃腫,胖子,減肥的圖片></A><BR>圖:你的網(wǎng)頁太臃腫了！</DIV>網(wǎng)站最重要的東西是什么？<BR>——內(nèi)容？SEO（搜索引擎優(yōu)化）？UE（用戶體驗）？都不對！是速度！<BR>內(nèi)容再豐富的網(wǎng)站，如果慢到無法訪問也是毫無意義的；
SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭(頁面效率和搜索蜘蛛之間的關(guān)系，需要進一步的確認，此為和上篇保持統(tǒng)一)；
UE設(shè)計的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。
<P></P>
<P>所以網(wǎng)頁的效率絕對是最值得關(guān)注的方面。雖然我們在<A title=《如何提高網(wǎng)頁的效率（上篇）——提高網(wǎng)頁效率的14條準則》
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html"
target=_blank>
《如何提高網(wǎng)頁的效率（上篇）——提高網(wǎng)頁效率的14條準則》</A>提到了如何提高網(wǎng)頁效率的14條準則，但是如何知道我們現(xiàn)在的網(wǎng)頁的效率到底如何？到底處于怎樣一個級別？又有哪些方面做的不夠好，需要改進呢？也許，你會說，問一下用戶不就知道了嗎？但是相比感性比例占據(jù)太大的用戶感受而言，理性的工具和數(shù)據(jù)更具有說服力。本篇就將向你介紹一款評測網(wǎng)頁效率的工具——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="如何提高網(wǎng)頁的效率(下篇).files/yslowlogo.png"></A><BR>yslow</DIV>
<P></P>
<P><A title=YSlow href="http://developer.yahoo.com/yslow/"
target=_blank>YSlow</A>是由<A title=Yahoo開發(fā)者團隊 href="http://developer.yahoo.com/"
target=_blank>Yahoo開發(fā)者團隊</A>發(fā)布的一款基于Firebug的插件。而<A title=Firebug
href="https://addons.mozilla.org/en-US/firefox/addon/5369"
target=_blank>Firebug</A>
又是一款基于FireFox的插件。所以說YSlow是一款基于FireFox插件的插件。雖然有點繞，但是最終說明的問題是：
<UL
style="LIST-STYLE-IMAGE: url(http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/wedgits_red.gif); MARGIN: 10px 0px 0px 15px">
<LI>很遺憾，微軟的IE系列瀏覽器不能使用YSlow。
<LI>YSlow只能使用在FireFox瀏覽器上。
<LI>如果要想使用YSlow，那么你必須先安裝FireFox。
<LI>如果要想使用YSlow，那么你就要安裝FireFox上的Firebug插件。 </LI></UL>
<P></P>
<P>這看上去好像有點令人沮喪，但是事實上它并不像想象中的那么麻煩，只要按照下面的步驟你將能很快的使用YSlow：
<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="如何提高網(wǎng)頁的效率(下篇).files/outLink.gif"></A>
下載最新版的FireFox，并安裝它。當然如果你已經(jīng)安裝了FireFox可以跳過此步。
<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="如何提高網(wǎng)頁的效率(下篇).files/outLink.gif"></A>
下載最新版的Firebug，并安裝它。當然如果你已經(jīng)安裝了Firebug可以跳過此步。
<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="如何提高網(wǎng)頁的效率(下篇).files/outLink.gif"></A>
下載最新版的YSlow，并安裝它。當然如果你已經(jīng)安裝了YSlow可以跳過此步。 </LI></OL>
<P></P>
<P>
<DIV class=floatMPic><A title=web標準設(shè)計
href="http://justinyoung.cnblogs.com/"><IMG height=355 alt=firefox,firebug,yslow
src="如何提高網(wǎng)頁的效率(下篇).files/yslow01.jpg"
width=514></A><BR>圖2：在菜單中先打開Firebug插件</DIV>這時候打開FireFox，你將在【工具】菜單中看到【firebug】（如圖2）。打開firebug，然后在firebug中點擊YSlow菜單，便看進入YSlow的主界面（如圖3）。<BR>
<DIV class=floatMPic><A title=點擊小圖查看完整大圖
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/28/pic/02.jpg"
target=_blank><IMG height=248 alt=點擊小圖查看完整大圖
src="如何提高網(wǎng)頁的效率(下篇).files/yslow02.jpg"
width=620></A><BR>圖3：在菜單中先打開Firebug插件(點擊小圖查看完整大圖)</DIV>
<P></P>
<H4>點擊【Performace】菜單</H4>
<P>YSlow便開始分析此頁的效率，并從13個最影響網(wǎng)頁效率的方面給出評估（如圖4）。
<DIV class=floatMPic><A title=web標準設(shè)計
href="http://justinyoung.cnblogs.com/"><IMG alt=firefox,firebug,yslow
src="如何提高網(wǎng)頁的效率(下篇).files/yslow03.jpg"></A><BR>圖4：YSlow給出的本頁面效率評估</DIV>
<P></P>
<P>可以看出來，YSlow評估的依據(jù)就是我們在<A title=《如何提高網(wǎng)頁的效率（上篇）——提高網(wǎng)頁效率的14條準則》
href="http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html"
target=_blank>
《如何提高網(wǎng)頁的效率（上篇）——提高網(wǎng)頁效率的14條準則》</A>中提到的前面13條。前面藍色的字母表示這一條準則的得分。A最高。點擊右面的三角形可以得到更多的信息和建議，有些信息里面還有“放大鏡”
圖標，點擊也將展示更為詳細的信息和建議。（如圖5所示）
<DIV class=floatMPic><A title=web標準設(shè)計
href="http://justinyoung.cnblogs.com/"><IMG alt=firefox,firebug,yslow
src="如何提高網(wǎng)頁的效率(下篇).files/yslow09.jpg"></A><BR>圖5：YSlow可以給出每條準則的詳細評估信息和建議</DIV>
<P></P>
<H4>點擊【Stats】菜單</H4>
<P>這個視圖會告訴你頁面的總體統(tǒng)計信息。包括頁面大小、css樣式表大小、腳本文件大小、總體圖片大小、flash文件大小和css中用到的圖片文件大小。還會告訴你，哪些東西被緩存了，緩存了多少等等。
<DIV class=floatMPic><A title=web標準設(shè)計
href="http://justinyoung.cnblogs.com/"><IMG alt=firefox,firebug,yslow
src="如何提高網(wǎng)頁的效率(下篇).files/yslow10.jpg"></A><BR>圖6：【Stats】視圖信息</DIV>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -