隨著WEB2.0時代來,為網路的帶來了空前的發展。前端使用者體驗變得越來越顯的重要,從而來彌補B/S結構的用戶交互型差的一些弊端,可是這樣會帶來一個問題就是會增加客戶端的壓力,比如大量運用JS代碼,大家都知道JS程式碼是運行在客戶端的,會影響到整個網頁的在瀏覽器的解析效率,這樣也可能暗示著會增加客戶端的流量,所以不管是從伺服器負載角度還是站在用戶的角度來看,對客戶端的程式碼進行最佳化都顯得格外重要!本文主要內部與外部兩方面來闡述WEB前端優化的方法。希望能給讀者一些體會和啟發。
首先,我們透過一個雅虎的統計圖表來看看開啟http://yahoo.com的http的流量資料:
我們可以發現一個頁面的從第一次發出伺服器請求到完全載入到客戶端的過程中,讀取html程式碼只佔了整個回應時間中的5%,這個結果適用於絕大多數網站,在取樣美國的前十位網站中,只有一家超過5%但少於20%,其餘80%的時間是用來讀取網頁其他內容的,也就是說,前端(原文是front-end,意思就是不包括html程式碼的其餘內容,可以是圖片,腳本,flash,視頻,各種東西)。這就是為什麼我們要把目光集中在這些東西來提高顯示速度的關鍵原因。
為什麼要從前端開始著手有三個主要原因:
一、從程式碼之外,咱們有以下三種方法
1.運用cdn技術
具體方式,可以穀歌一下。 (大體的原理好像就是判斷訪客的位置及訪問的內容從而來選擇就近的伺服器來處理用戶的請求)
2.加一個長時間過期的頭部
Expires: Thu, 15 Apr 2010 20:00:00 GMT
瀏覽器會用快取來減少http請求數來加快頁面載入的時間,如果頁面頭部加上一個很長的過期時間,瀏覽器就會一直快取頁面裡的元素。
不過這樣會帶來一個問題,就是如果頁面裡的東西變動的話就要改名字了,否則用戶端不會主動刷新,在yahoo工作組用的是版本號,例如yahoo_2.0.6.js
3.Gzip壓縮
Gzip是現在最流行和最有效的壓縮方式,她是GNU開發的,RFC1952標準化。
(Gzip是在伺服器端壓縮圖片,css,腳本等,傳送到用戶端的瀏覽器再解壓,這樣可以提高傳輸速度,不過對伺服器的壓力會增大,一般選擇部分元素壓縮比較合適。