1. 程式人生 > >Yahoo團隊經驗:網站性能優化的34條黃金法則

Yahoo團隊經驗:網站性能優化的34條黃金法則

imp 文件中 http 在一起 而且 cache 例如 相對 團隊

英文原文:http://developer.yahoo.com/performance/rules.html

1、盡量減少HTTP請求次數

(1)合並文件就是通過把所有的腳本放到一個文件中來減少HTTP 請求的方法,如可以簡單地把所有的CSS 文件都放到一個樣式表中。當腳本或者樣式表在不同頁面中使用時需要做不同的修改,這可能會相對麻煩點,但即便如此也要把這個方法作為改善頁面性能的重要一步。CSS Sprites 是減少圖像請求的有效方法,把所有的背景圖像都放到一個圖片文件中,然後通過CSS 的background-image和background-position屬性來顯示不同的部分。圖片地圖是把多張圖片整合到一張圖片中,雖然文件的總體大小不會改變,但是可以減少HTTP請求次數。圖片地圖只有在圖片的所有組成部分在頁面中是緊挨在一起的時候才能使用,如導航欄。

2、減少DNS 查找次數

3、避免跳轉

4、可緩存的AJAX

5、推遲加載時間

6、預加載,

7、減少DOM元素數量

8、根據域名劃分頁面內容

9、使iframe的數量最小

10、不要出現404錯誤

11、使用內容分發網絡

12、為文件頭指定Expires或Cache-Control

13、Gzip壓縮文件內容

14、配置ETag

15、盡早刷新輸出緩沖

16、使用GET 來完成AJAX請求

17、把樣式表置於頂部

18、避免使用CSS表達式

19、使用外部JavaScript和CSS

20、削減JavaScript和CSS

21、用<link>代替@import

22、避免使用濾鏡

23、把腳本置於頁面底部

24、剔除重復腳本

25、減少DOM 訪問

26、開發智能事件處理程序

27、減小Cookie體積

28、對於頁面內容使用無cookie域名

29、優化圖像

30、優化CSS Sprite

31、不要在HTML中縮放圖像

32、favicon.ico要小而且可緩存

favicon.ico是位於服務器根目錄下的一個圖片文件。它是必定存在的,因為即使你不關心它是否有用,瀏覽器也會對它發出請求,因此最好不要返回一 個404 Not Found的響應。由於是在同一臺服務器上,它每被請求一次coockie就會被發送一次。這個圖片文件還會影響下載順序,例如在IE中當你在 onload中請求額外的文件時,favicon會在這些額外內容被加載前下載。因此,為了減少favicon.ico帶來的弊端,要做到:
文件盡量地小,最好小於1K
在適當的時候(也就是你不要打算再換 favicon.ico的時候,因為更換新文件時不能對它進行重命名)為它設置Expires文件頭。你可以很安全地把Expires文件頭設置為未來的幾個月。你可以通過核對當前favicon.ico的上次編輯時間來作出判斷。

Imagemagick可以幫你創建小巧的 favicon

33、保持單個內容小於25k

這條限制主要是因為iPhone不能緩存大於25k的文件。註意這裏指的是壓縮後的大小。由於單純gizp壓縮可能達不要求,因此精簡文件就顯得十分重要。

34、打包組件成復合文本

把頁面內容打包成復合文本就如同帶有多附件的Email,它能夠使你在一個HTTP請求中取得多個組件(切記:HTTP請求是很奢侈的)。當你使用這條規則時,首先要確定用戶代理是否支持(iPhone就不支持)。

Yahoo團隊經驗:網站性能優化的34條黃金法則