1.減少Http請求
使用圖片地圖
使用CSS Sprites
合併JS和CSS文件
這個是由於瀏覽器對同一個host有並行下載的限制,http請求越多,總體下載速度越慢
2.使用CDN(內容發佈網絡):當頁面中有很多資源的時候,可以從不同的服務中去讀取,同時可以提高並行下載速度
3.添加http Expires頭:爲圖片視頻之類很少改變的資源設置長的Expires時間將直接減少http請求
如果資源設置了Expires頭爲將來的某個時間,下次訪問時候瀏覽器發現資源還沒有過期,會直接從緩存中讀取,不會再次產生http請求
另外一個有點類似的概念是條件Get請求,某些資源比如JS文件,如果我們總是需要最新的JS文件,那麼可以設置條件Get請求去服務端驗證本地的資源是否需要更新.這種情況下瀏覽器僅會向Server發送一個Header,如果資源沒有更新,會返回一個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壓縮的,或許是爲了減少服務器的壓力