隨著WEB2.0時代來,給網絡的帶來了空前的發(fā)展。前端用戶體驗變得越來越顯的重要,從而來彌補B/S結構的用戶交互型差的一些弊端,可是這樣會帶來一個問題就是會增加客戶端的壓力,比如大量運用JS代碼,大家都知道JS代碼是運行在客戶端的,會影響到整個網頁的在瀏覽器的解析效率,這樣也可能暗示著會增加客戶端的流量,所以不管是從服務器負載角度還是站在用戶的角度來看,對客戶端的代碼進行優(yōu)化都顯得尤為重要!本文主要內部和外部兩方面來闡述WEB前端優(yōu)化的方法。希望能給讀者一些體會和啟發(fā)。
首先,我們通過一個雅虎的統(tǒng)計圖表來看看打開http://yahoo.com的http的流量數據:
我們可以發(fā)現(xiàn)一個頁面的從第一次發(fā)出服務器請求到完全載入到客戶端的過程中,讀取html代碼只占了整個響應時間中的5%,這個結果適 用于絕大多數網站,在采樣美國的前十位網站中,只有一家超過5%但少于20%,其余80%的時間是用來讀取網頁其他內容的,也就是說,前端(原文是 front-end,意思就是不包括html代碼的其余內容,可以是圖片,腳本,flash,視頻,各種東西)。這就是為什么我們要把目光集中在這些東西 來提高顯示速度的關鍵原因。
為什么要從前端開始著手有三個主要原因:
- 這里有提升和改進的潛力。如果能減少一半的體積,就能減少40%的響應時間。
- 改進前端比改進后端需要的時間和資源更少。(改進后端要重新設計應用程序規(guī)劃,代碼,尋找優(yōu)化代碼的方法,添加或改變硬件配置,分布式數據庫,等等)
- 我們的黃金規(guī)則是:首先優(yōu)化前端表現(xiàn),這些東西耗費了用戶端響應時間中的80%。
一、從代碼之外,咱們有以下三種方法
1.運用cdn技術
具體方式,可以Google一下。(大體的原理好像就是判斷訪問者的位置及訪問的內容從而來選擇就近的服務器來處理用戶的請求)
2.加一個長時間過期的頭部
Expires: Thu, 15 Apr 2010 20:00:00 GMT
瀏覽器會用緩存來減少http請求數來加快頁面加載的時間,如果頁面頭部加一個很長的過期時間,瀏覽器就會一直緩存頁面里的元素。 不過這樣會帶來一個問題,就是如果頁面里的東西變動的話就要改名字了,否則用戶端不會主動刷新,在yahoo工作組用的是版本號,例如yahoo_2.0.6.js
3.Gzip壓縮
Gzip是現(xiàn)在最流行和最有效的壓縮方式,她是GNU開發(fā)的,RFC1952標準化。 (Gzip是在服務器端壓縮圖片,css,腳本等,傳送到用戶端的瀏覽器再解壓,這樣可以提高傳輸速度,不過對服務器的壓力會增大,一般選擇部分元素壓縮比較合適。
出處:Be Energetic,Be Confident!
責任編輯:bluehearts
上一頁 下一頁 WEB前端優(yōu)化的體會 [2]
◎進入論壇網頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|