Web前端性能優化的14條規則

1.減小Http請求

• 使用圖片地圖
• 使用CSS Sprites
• 合併JS和CSS文件

這個是因爲瀏覽器對同一個host有並行下載的限制,http請求越多,整體下載速度越慢

2.使用CDN(內容發佈網絡):當頁面中有不少資源的時候,能夠從不一樣的服務中去讀取,同時能夠提升並行下載速度

3.添加http Expires頭:爲圖片視頻之類不多改變的資源設置長的Expires時間將直接減小http請求

• 若是資源設置了Expires頭爲未來的某個時間,下次訪問時候瀏覽器發現資源尚未過時,會直接從緩存中讀取,不會再次產生http請求

另一個有點相似的概念是條件Get請求,某些資源好比JS文件,若是咱們老是須要最新的JS 文件,那麼能夠設置條件Get請求去服務端驗證本地的資源是否須要更新.這種狀況下瀏覽器會向Server發送一個http請求,若是資源沒有更新,會返 回一個http 304的response,若是資源跟新,則從新下載資源:

 

條件Get請求每次都會產生一個304的請求

4.壓縮組件:在Server端對Response資源進行壓縮再傳給瀏覽器,通常使用GZIP

5.將CSS放再頂部: 能加快頁面內容顯示,而且能避免頁面產生白屏

6.將JS放在底部

• JS會阻塞對其後面內容的呈現
• JS會阻塞對其後面內容的下載

7.避免CSS表達式

8.將JS,CSS放在外部文件中

9.經過使用Keep-Alive和較少的域名來減小DNS查找

10.精簡JS和CSS文件

11.尋找一種避免重定向的方法

12.移除重複的腳本

13.配置Etag

14.確保Ajax請求遵照性能知道,必要時候應具有長久的expires頭

 

咱們可使用Yahoo的Yslow firefox插件來檢查網站的前端性能.

最後,咱們隨便打開一個淘寶寶貝頁面,用Fiddler查看一下,發現淘寶至少作了以下優化:

• 大規模使用CDN,圖片,jS,css互相之間都使用了不一樣的域名.單是圖片服務器,下面又使用了不少不一樣的服務器,好比img01.taobaocdn.com等等
• 當第二次瀏覽同一寶貝的時候,產生大量的Http 304請求.這樣既能保證獲取最新的資源,又能儘可能減小數據傳輸
• CSS,JS文件大都精簡過
• 對於資源類的東西好比圖片,設置爲不受保護.也就是說不須要登陸依然能夠直接訪問的,這樣就避免設置/讀取cookie,達到節省網絡資源的目的

惟一一點沒有優化的是圖片,服務端返回的圖片都是沒有Gzip壓縮的,或許是爲了減小服務器的壓力

 

轉載地址：http://lijingshou.iteye.com/blog/1965739