網站優化——Yslow評分標準

http://www.moondyzone.com/css/279.html

YSlow 是Yahoo開發者團隊發佈的一款基於Firebug的插件。Yshow=why slow?是用於用於分析網頁，並根據一些高性能網站的規則進行相應的評級打分，對於網頁性能優化有很好的幫助作用，告訴你那些部分影響了你的網頁速度。

今天用Yslow評了一下我前不久做的一個站的頁面，結果是73分。

這裏一共有13條主要規則，而想要滿足這13條規則達到網站速度的最佳優化，並不是一個WEB前端技術員能獨立完成的。其中第2、3、4及13條， 需要網絡服務器相關的技術來解決，這也是我這頁面評分不高的原因了。下面具體來說明一下這13條規則：

1、Make fewer HTTP requests–更少的http請求，也就是說頁面中儘量少的引用外部靜態資源，js、css以及圖片。
        80%的用戶響應時間都是浪費在前端。而這些時間主要又是因爲下載圖片、樣式表、JavaScript腳本、flash等文件造成的。減少這些資源文件的 Request請求數將是提高網頁顯示效率的重點。要做到這一點有很多方法，比如使用CSS Sprites整合圖片、合併CSS文件（不需要劃分爲什麼色彩樣式、佈局樣式、文字樣式之類的）、合併JS文件。

2、Use a CDN–使用CDN網絡，將頁面中的靜態資源分佈到離用戶最近的網絡節點上。
        這是有關服務器線路的問題，我也不是太瞭解，放在國內的話大體上也就是電信、網通、雙線、多線的意思了。

3、Add an Expires header–爲靜態資源文件增加過期時間，讓用戶通過本地緩存來更快的訪問網站。
        設置靜態文件的過期時間，最開始的時候我找了好久也沒找到這個過期時間要怎麼加，原來這個也不屬於前端人員的範疇，找服務器管理人員去了解下吧。

4、Gzip components–壓縮靜態資源內容，減少網絡傳輸時間。
        這個應該很熟悉了，Gzip的思想就是把文件先在服務器端進行壓縮，然後再傳輸，在客戶端再進行解壓。對於當前的PC機配置來說，這點點的解壓工程實在是 微乎其微。不過跟上一條一樣，也是屬於服務器管理人員的範疇了。

5、Put CSS at the top–將CSS放在頁面頭部，能夠更快渲染頁面。
        這個很容易理解，而且絕大部分人也都會這麼做的。無論是HTML還是XHTML還是CSS都是解釋型的語言，而非編譯型的。所以CSS到上方的話，那麼瀏 覽器解析結構的時候，就已經可以對頁面進行渲染。

6、Put JS at the bottom–將JS放在頁面底部，一般情況下JS的下載是阻塞模式的，放在頁面頂部會阻塞其他資源的下載。
        跟上一條一樣，很多人都習慣了把JS也放在頭部，這樣不僅會阻塞其它資源的下載，而且JS一般都是用來交互的，如果頁面都還沒有出來，何來的交互呢？所以 JS還是要放到底部加載。

7、Avoid CSS expressions–不要使用CSS表達式，因爲CSS表達式需要很多資源，有時甚至會造成頁面假死。
        expressions其實就像是其它語言中的if……else……可以在CSS中進行邏輯判斷，但是這樣的代價是非常大的，曾經我爲了滿足IE6下的圖 片大小自適應用了這麼個語句，結果頁面慢如蝸牛。

8、Make JS and CSS external–將CSS和JS使用外部的獨立文件。
        看起來跟第1條有點矛盾，不過這應該看具體情況了。javascript和css都有緩存，獨立成外部文件的話，有利於提高用戶再次訪問時的效率。而某些 大站比如yahoo，會把CSS及JS都寫在頁面裏，那是因爲訪問量太大，儘可能的減少請求數。如果你的網站訪問量還不是那麼地驚人的話，還是獨立出來比 較好。

9、Reduce DNS lookups–減少DNS查找。
        這一點雖然也是服務器方面的問題，不過還是很好理解。也就是說不要把同一個網站的內容分散在不同的服務器上。比如說，一個圖片站，因爲空間大小的關係把某 一部分圖片放在了另一個服務器上，那麼這一部分的圖片在瀏覽的時候就會慢很多。

10、Minify JS–最小化壓縮JS，減少JavaScript和CSS文件的體積。
        這個應該見得多了，我們應該經常會見到被壓成一行的JS以及CSS文件，壓縮工具在網上隨處都可見。

11、Avoid redirects–避免無意義的跳轉。
        這裏有一種現象常常會被開發者所忽略，這種現象發生在當URL本該有斜槓（/）卻被忽略掉時，這時候會返回一個301的狀態碼，然後瀏覽器重新發起一次請 求，這其中就浪費掉了時間。

12、Remove duplicate scripts–去除重複的腳本，不光是文件，甚至是同功能的函數。
       這個道理很淺顯，我想也不用說明太多了。

13、Configure ETags–配置實體標籤。
        Etag（Entity tags ）實體標籤。這個tag和你在網上經常看到的標籤雲那種tag有點區別。這個Etag不是給用戶用的，而是給瀏覽器緩存用的。Etag是服務器告訴瀏覽器 緩存，緩存中的內容是否已經發生變化的一種機制。通過Etag，瀏覽器就可以知道現在的緩存中的內容是不是最新的，需不需要重新從服務器上重新下載。這也 是服務器人員的工作範疇，有興趣的可以瞭解下。

後記，其實寫這文章之前，有很多概念都是模模糊糊的，所以也查閱了很多資料。不過現在都清晰啦，這也是一種不錯的學習方法呢。

新版本Yslow 22項評分標準

對於一個WEB前端工作者來說，Yslow絕對是一款必不可少的性能優化工具，可以方便地查出是哪些因素影響了你的網頁性能。

新版本的Yslow共有22條指標，比原來的多了9條。還可以自定義規則，新版本Yslow有三個內置的規則：V2、V1、小型站和博客，V2的指 標最多，包括所有22項指標，而V1則只包括上一個版本的13條指標。你可以完全設置自己的規則，這樣就可以比較靈活，也更客觀實際的分析自己的網站。另 外，還增加了一些網站的優化工具，比如Smush.it、JS Minified、 JS Beautified等等。

在這裏我只列舉一下新增的那9條指標了，其它的可以看另一篇網站優化——Yslow評分標準。由於是本人自 行翻譯的，如有錯漏還請達人指出。

Make AJAX cacheable
設置AJAX的緩存。當前AJAX的應用越來越廣泛，AJAX的信息讀取是異步的，這也表示用戶不一定會等待這異步的響應，爲避免重複的AJAX請求，設 置緩存是優化性能的一個好方法。

Use GET for AJAX requests
用GET獲取AJAX請求。又是一條有關AJAX的。AJAX的傳值可用GET跟POST，在這裏建議使用的是GET。

Reduce the number of DOM elements
減少頁面DOM節點。也就是講究頁面代碼的簡潔，一個複雜的頁面不僅增大頁面的體積，也會對JavaScript訪問DOM元素產生影響。

Avoid HTTP 404 (Not Found) error
避免404錯誤頁面的出現。這個應該不用怎麼解釋了，不管從服務器資源還是用戶體驗上來說，都是不好的。

Reduce cookie size
減少cookie的大小。cookie一般用於身份驗證等用途，一般說來cookie被限制在4K以內，儘量控制 Cookie 的大小，不要塞入一些無用的信息。

Use cookie-free domains
使用域名無關性的Cookie。這裏是有關靜態服務器的問題，主要是指一些靜態文件比如說圖片、CSS等等，比如說YAHOO，他的靜態文件都在 yimg.com 上，客戶端請求靜態文件的時候，減少了 Cookie 的反覆傳輸對主域名的影響。

Avoid AlphaImageLoader filter
避免AlphaImageLoader濾鏡的使用。這個幾乎都是用在IE6下解決PNG透明的問題上的。而爲了實現此效果而犧牲的性能來說，是很不合算 的。

Do not scale images in HTML
不要對圖片進行縮放。也就是圖片的實際大小大於他的顯示必要，比如一個800*600的圖片，而我們在頁面上只顯示的是400*300的大小，那麼這便是 一種服務器資源的浪費。

Make favicon small and cacheable
使圖標儘可能小，並使用緩存。這裏指的是favicon.ico了，設置favicon.ico緩存可以避免頻繁的頁面請求。