不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規

不得不說現在依然適用於大部分的網站

當年雅虎推薦了一套優化網站載入速度的34條法則（包括Yslow規則22條），以下是詳細說明。

1. Minimize HTTP Requests 減少 HTTP 請求

圖片、css、script、flash 等等這些都會增加 http 請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個檔案，頁面裡直接寫入圖片也是不好的做法，應該寫進CSS裡，利用 CSS sprites 將小圖拼合後利用background來定位。

2. Use a Content Delivery Network 利用CDN技術

CDN 確實是好東西，8過伺服器提供商的這項服務一般是要收費的，我以前買的國內空間是有這個的但是我當時根本不知道啥用，現在沒了。。。

3. Add an Expires or a Cache-Control Header 設定標頭檔案過期或者靜態快取

瀏覽器會用快取來減少http請求數來加快頁面載入的時間，如果頁面頭部加一個很長的過期時間，瀏覽器就會一直快取頁面裡的元素。不過這樣如果 頁面裡的東西變動的話就要改名字了，否則使用者端不會主動重新整理，看自己衡量了~ 這項可以通過修改.htaccess檔案來實現。

4. Gzip Components Gzip 壓縮

Gzip格式是一種很普遍的壓縮技術，幾乎所有的瀏覽器都有解壓Gzip

5. Put Stylesheets at the Top 把 CSS 放頂部

讓瀏覽者能儘早的看到網站的完整樣式。

6. Put Scripts at the Bottom 把 JS 放底部

網站呈現完畢後再進行功能設定，當然這些JS要在你的載入過程中不影響內容表現。

7. Avoid CSS Expressions 避免CSS Expressions

CSS表示式很可怕，這個只被IE支援的東西執行時候的運算量非常大，你移動一下滑鼠它都要進行重計算的，但有時候為了做瀏覽器的相容必須要用到這個||| IE6去死去死！

8. Make JavaScript and CSS External 將 JS 和 CSS 外鏈

前面講到了快取這個事情，一些較為公用的JS和CSS，我們可以使用外鏈的形式，譬如我就是從Google外鏈來的Jquery檔案，如果我的瀏覽者在瀏覽別的使用了這個外鏈檔案的網站時已經下載並快取了這個檔案，那麼他在瀏覽我的網站的時候就不需要再進行下載了！

9. Reduce DNS Lookups 減少 DNS 查詢

貌似是要減少網站從外部呼叫資源，我的Google分析和picasa的外鏈圖片都算在裡面了。

10. Minify JavaScript and CSS 減小 JS 和 CSS 的體積

寫JS和CSS都是有技巧的，用最少的程式碼實現同樣的功能，減少空白，增強邏輯性，用縮寫方式等等，當然也有不少工具也能夠幫你實現這一點。

11. Avoid Redirects 避免重定向

再寫入連結時，雖然 http://www.test.com 和 http://www.test.com/ 僅有一個最後的 / 只差，但是結果是不同的，伺服器需要花時間把前者重定向為後者然後進行跳轉，這個要自己注意，也可以在Apache裡用Alias 或者mod_rewrite或者DirectorySlash解決。

12. Remove Duplicate Scripts 刪除重複指令碼

重複呼叫的程式碼瀏覽器並不會識別忽略，而是會再次運算一遍，這當然是大大的浪費。

13. Configure ETags 配置 ETags

搞不清楚咋回事，總之我是在.htaccess裡把它刪除了。

14. Make Ajax Cacheable 快取 Ajax

Ajax是實時響應的，在瀏覽器接收到新的資料前，舊的資料被快取，這樣能夠更好的提高效率。

15. Flush the Buffer Early 儘早的釋放緩衝

當用戶進行頁面請求時，伺服器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩衝，這樣可以將檔案頭先發送出去，然後再發送檔案內容，提高效率。

16. Use GET for AJAX Requests 用 GET 方式進行 AJAX 請求

Get 方法和伺服器只有一次互動（傳送資料），而 Post 要兩次（傳送頭部再發送資料）。

17. Post-load Components 延遲載入元件

最先載入必須的元件進行頁面初始化，然後再載入其他，YUI Image Loader 是很好的例子。

18. Preload components 預載入元件

提前載入以後可能用到的東西，和延遲載入並不衝突，它的目的是為後續請求提供更快的響應，參見 Google 首頁上的CSS sprites應用。

19. Reduce the Number of DOM Elements 減少 DOM 元素數量

複雜的頁面結構意味著更長的下載及響應時間，更合理更高效的使用標籤來架構頁面，是好的前端的必備條件。

20. Split Components Across Domains 跨域分離元件

頁面元件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4個域名會引起上面說到的DNS查詢浪費。

21. Minimize the Number of iframes 減少 iframe 數量

需要更有效的利用 ifames。
iframe 優點：有利於下載緩慢的廣告等第三方內容，安全沙箱，並行下載指令碼
iframe 缺點：即使為空也會有較大資源消耗，會阻止頁面的onload，非語義。

22. No 404 不要出現 404 頁面

站點本身裡（非搜尋結果）出現404頁面，無意義的404頁面會影響使用者體驗並且會消耗伺服器資源。

23. Reduce Cookie Size 減小 Cookie

Cookie在伺服器及瀏覽器之間的通過檔案頭進行交換，儘可能減小Cookie體積，設定合理的過期時間，能夠很好的提高效率。

24. Use Cookie-free Domains for Components 對元件使用無 Cookie 的域名

對靜態元件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態元件式一個好方法，或者也可以在Cookie中只存放帶www的域名。

25. Minimize DOM Access 減少 DOM 的訪問次數

JS訪問DOM是很慢的，儘量不要用JS來設定頁面佈局。

26. Develop Smart Event Handlers 開發靈活的事件處理控制代碼

DOM樹上過多的元素被加入事件控制代碼的話，反應效率肯定會低，YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設定DOM事件控制代碼

27. Choose <link> over @import 使用 <link> 而非 @import

在IE中使用@import就和在頁面底部用<link>一樣，我們前面說要把<link>放頂部的。

28. Avoid Filters 避免過濾器的使用

如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+使用者。

29. Optimize Images 優化圖片

將你的GIF轉為PNG8會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。

30. Optimize CSS Sprites 優化 CSS Sprites

在CSS Sprites中豎直並儘量緊湊的排列圖片，儘量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。

31. Don’t Scale Images in HTML 不要在HTML中縮放圖片

圖片要用多大的就用多大的，1000X1000的圖片被width=”100″ height=”100″以後，本身的KB數是不會減少的。

32. Make favicon. ico Small and Cacheable 縮小 favicon. ico 的大小並快取它

站點的瀏覽器ICO應該不是經常換吧，那就長時間的快取它，並且最好控制在1K以下。

33. Keep Components under 25K 保證元件在 25K 以下

iPhone不能快取25K以上的元件，並且這還是要在被壓縮前。

34. Pack Components into a Multipart Document 將元件打包進一個多部分的文件中

就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術需要確保你的代理支援，iPhone 就不支援。

關注我，下一篇介紹《使用 Chrome 開發者工具 performance 檢測頁面效能》～