提高網(wǎng)頁(yè)的效率 Use YSlow to know why your web Slow第2/2頁(yè)
點(diǎn)擊【Performace】菜單
YSlow便開始分析此頁(yè)的效率，并從13個(gè)最影響網(wǎng)頁(yè)效率的方面給出評(píng)估（如圖4）。
圖4：YSlow給出的本頁(yè)面效率評(píng)估
可以看出來(lái)，YSlow評(píng)估的依據(jù)就是我們?cè)?FONT color=#0000ff> 《如何提高網(wǎng)頁(yè)的效率（上篇）——提高網(wǎng)頁(yè)效率的14條準(zhǔn)則》中提到的前面13條。前面藍(lán)色的字母表示這一條準(zhǔn)則的得分。A最高。點(diǎn)擊右面的三角形可以得到更多的信息和建議，有些信息里面還有“放大鏡” 圖標(biāo)，點(diǎn)擊也將展示更為詳細(xì)的信息和建議。（如圖5所示）
圖5：YSlow可以給出每條準(zhǔn)則的詳細(xì)評(píng)估信息和建議
點(diǎn)擊【Stats】菜單
這個(gè)視圖會(huì)告訴你頁(yè)面的總體統(tǒng)計(jì)信息。包括頁(yè)面大小、css樣式表大小、腳本文件大小、總體圖片大小、flash文件大小和css中用到的圖片文件大小。還會(huì)告訴你，哪些東西被緩存了，緩存了多少等等。
圖6：【Stats】視圖信息
點(diǎn)擊【Components】菜單
這個(gè)視圖是一個(gè)頁(yè)面所有部件的信息列表。從中我們可以得知每個(gè)部件的各種詳細(xì)信息。如：類型、URL、Expires數(shù)據(jù)、狀態(tài)、大小、讀取時(shí)間、ETag信息等等。通過對(duì)這個(gè)列表的分析，我們就可以知道到底是什么東西最耗費(fèi)我們的資源，從而有針對(duì)性的進(jìn)行優(yōu)化。
圖7：【Components】視圖信息，點(diǎn)擊“放大鏡”圖標(biāo)我們可以知道更詳細(xì)的信息（點(diǎn)擊小圖查看完整大圖）
點(diǎn)擊【Tools】菜單
【Tools】菜單包含4個(gè)子菜單，就是4個(gè)實(shí)用工具?！綣SLine】工具會(huì)生成JSLine報(bào)表，報(bào)表是對(duì)本網(wǎng)頁(yè)中JS腳本的分析報(bào)告，包含錯(cuò)誤和建議?！続LL JS】工具，將生成本頁(yè)面所有腳本代碼便于閱讀和打印的報(bào)表頁(yè)面。【ALL CSS】工具，將生成本頁(yè)面 所有CSS樣式表代碼便于閱讀和打印的報(bào)表頁(yè)面。【Printable View】將【Performance】和【Stats】視圖中的信息生成一份更適合閱讀和打印的報(bào)表頁(yè)面。
圖8：【Tools】菜單，包含了4個(gè)子菜單
點(diǎn)擊【Help】菜單
【Help】主要是些常用的幫助途徑的入口。從這里你可以很方面的訪問YSlow的官方網(wǎng)絡(luò)和博客。如果你還對(duì)YSlow的使用有什么疑惑的話，那么在這里你將獲得滿意的解答。
圖8：【Help】菜單是些常用的幫助入口
后記
“工欲善其事，必先厲其器！”好的工具的確能很大的提高我們的工作效率。但是“阿斗”就算手里拿著“方天畫戟”，估計(jì)也沒有幾個(gè)人怕他。好的工具是一方面，但是更重要的還是提高我們自身的知識(shí)水平。就如同這款YSlow，如果沒有 《如何提高網(wǎng)頁(yè)的效率（上篇）——提高網(wǎng)頁(yè)效率的14條準(zhǔn)則》中的理論知識(shí)，工具提供的信息我們看到的可能只是表面，就算看懂了數(shù)據(jù)，我們也很難知道對(duì)應(yīng)的手段和措施。壯漢拿厲斧，這樣伐木才能又快又輕松。
