Yslow是雅虎開辟的基於網頁機能剖析閱讀器插件，從歲首年月我應用瞭YSlow後，轉變瞭博客模板大批冗餘代碼，不但晉升瞭網頁的翻開速率，這款插 件還贊助我剖析瞭很多其他網站的代碼，之前我還特地寫瞭進步網站速率的秘笈，就是經由過程這款插件剖析得出的。收集上已有很多Yslow應用解釋瞭，本文我 想先容下我應用Yslow的辦法和一些他人沒提到的小技能。

Yslow的安裝辦法

如今Yslow已有許多版本瞭，本文先容的是3.0.4最新版，翻開Yslow官網就可以看到有四個版本可供挑選：火狐（firefox）閱讀器、谷歌（chrome）閱讀器、歐朋（opera）閱讀器和挪動版。

安裝Yslow要先安裝 Firebug（當地址以火狐為例），兩種辦法啟動Yslow：1、翻開Firebug窗口，挑選Yslow選項。2、間接點擊火狐右下角的Yslow啟動按鈕。

（圖1：Yslow的啟動界面）

點擊 Run Test 運轉Yslow，也能夠點擊 Grade， Components， 或Statistics選項開端對頁面的剖析，假如在 Autorun YSlow each time a web page is loaded 上打上對勾，它將主動對今後翻開頁面舉行分。

留意圖中的紅框，這裡是規矩集，YSlow （V2）包括瞭全部22個測試的規矩，YSlow （V1）包括原始13規矩，小網站或博客-這個規矩集包括14個規矩，實用於小型網站或博客，發起對號入坐。

雅虎評價網站機能的23條軍規

雅虎曾針對網站速率提出瞭異常有名34條原則：《Best Practices for Speeding Up Your Web Site》。而如今將34條精簡為加倍直不雅的23條，並針對每條給出從F~A的評分和終極的總分。

而如今23條網站機能優化發起在YSlow的官網首頁就可以看到，固然也能夠沒有看，在應用Yslow後，在掌握面板裡就會給你評分提醒，和改良發起。

Grade（品級視圖）Yslow的第二個選項卡

（圖2：Yslow給出的網站機能評分）

Yslow給出的網站機能評分，從F~A，A是最好的，經由過程測試盧松松博客來看，網站有4處得分最低，比方圖2中的最低分提醒：我博客的HTTP要求太多。個中運用瞭14個內部JS、3個CSS文件（之前我已從6個歸並為3個）、14個CSS配景圖片。

Yslow的發起是讓我歸並這些，至於歸並CSS援用圖片我在進步網站翻開速率的7大秘笈中先容過。

Components（組件視圖）Yslow的第三個選項卡

（圖3：經由過程Components磨練檢察網頁各個元素占用的空間巨細）

經由過程Components磨練檢察網頁各個元素占用的空間巨細，比方我博客某個頁面，有236個images（圖片），占用瞭489.2K，經由過程詳 細檢察，發明來自gravatar（批評頭像）的援用圖片異常大，在加上我博客本省批評量就打，每一個頭像就占用幾K，幾百個就占用瞭全部網頁50%的大 小，並且圖片照樣援用的，加載就更慢。

以是，我得出的結論是：gravatar固然加強瞭互動性和本性，但也嚴嚴實實影響瞭網站速率。

Statistics（統計信息視圖）Yslow的第四個選項卡

（圖4：Yslow的統計信息視圖）

左邊圖表表現是頁面元素在空緩存的加載情形，右邊為頁面元素應用緩存後的頁面加載情形。從圖中能夠直不雅的看出（特別是我標的紅框），這個網頁263 個HTTP要求，網頁的巨細到達773.9K，意味著翻開沒翻開一個頁面險些須要下載1M的器械，而經由過程應用緩存後我們能夠看到後果圖片根本靠緩存，而網 頁的總巨細緊縮到43.2K。

Statistics這個統計信息視圖對象和Components（第三選項卡）一樣，隻是後果更直不雅，假如要得到機能優化發起照樣要看Grade（第二選項卡）的具體發起。

Tools（幫助對象）Yslow的第五個選項卡

（圖5：Yslow供給的小對象）

JSLint是一個壯大的對象，它能夠磨練HTML代碼和內聯的Javaｓｃｒｉｐｔ代碼，經由過程JSLint發明瞭谷歌 analytics上的一個js毛病。

ALL JS：檢察你這個網頁上一共援用瞭若幹JS。

All JS Beautified：把全部JS放在翻開的頁面中，應用站長同一檢討（我感到感化沒有大）。

All JS Minified：同上，但它表現的是緊縮過的js代碼，假如你要JS優化，它已給你優化好瞭，來過來間接用。

All CSS：表現你網頁全部CSS文件。

YUI CSS Compressor：表現網頁緊縮後的CSS文件，也是拿過來能夠間接用的。

All Smush.it™：圖片在線優化網站，點擊它後會主動跳到smushit網站上給你主動優化CSS圖片，該網站供給瞭優化前與優化後的比較，點擊間接下載優化後的圖片，在籠罩到本身網站上便可以瞭，猛烈推舉。

Printable View：這個是打印用的，部分開會、前端計劃師評論辯論、向老板報告請示時估量用的上。

除非說明，文章均為盧松松首創，轉載請說明出處，感謝。

本文地點：/reed/362.html