隨著WEB2.0時(shí)代來，給網(wǎng)絡(luò)的帶來了空前的發(fā)展。前端用戶體驗(yàn)變得越來越顯的重要，從而來彌補(bǔ)B/S結(jié)構(gòu)的用戶交互型差的一些弊端，可是這樣會(huì)帶來一個(gè)問題就是會(huì)增加客戶端的壓力，比如大量運(yùn)用JS代碼，大家都知道JS代碼是運(yùn)行在客戶端的，會(huì)影響到整個(gè)網(wǎng)頁(yè)的在瀏覽器的解析效率，這樣也可能暗示著會(huì)增加客戶端的流量，所以不管是從服務(wù)器負(fù)載角度還是站在用戶的角度來看，對(duì)客戶端的代碼進(jìn)行優(yōu)化都顯得尤為重要！本文主要內(nèi)部和外部?jī)煞矫鎭黻U述WEB前端優(yōu)化的方法。希望能給讀者一些體會(huì)和啟發(fā)。

首先，我們通過一個(gè)雅虎的統(tǒng)計(jì)圖表來看看打開http://yahoo.com的http的流量數(shù)據(jù)：

我們可以發(fā)現(xiàn)一個(gè)頁(yè)面的從第一次發(fā)出服務(wù)器請(qǐng)求到完全載入到客戶端的過程中，讀取html代碼只占了整個(gè)響應(yīng)時(shí)間中的5%，這個(gè)結(jié)果適 用于絕大多數(shù)網(wǎng)站，在采樣美國(guó)的前十位網(wǎng)站中，只有一家超過5%但少于20%，其余80%的時(shí)間是用來讀取網(wǎng)頁(yè)其他內(nèi)容的，也就是說，前端（原文是 front-end，意思就是不包括html代碼的其余內(nèi)容，可以是圖片，腳本，flash，視頻，各種東西）。這就是為什么我們要把目光集中在這些東西 來提高顯示速度的關(guān)鍵原因。

為什么要從前端開始著手有三個(gè)主要原因：

1. 這里有提升和改進(jìn)的潛力。如果能減少一半的體積，就能減少40%的響應(yīng)時(shí)間。
2. 改進(jìn)前端比改進(jìn)后端需要的時(shí)間和資源更少。（改進(jìn)后端要重新設(shè)計(jì)應(yīng)用程序規(guī)劃，代碼，尋找優(yōu)化代碼的方法，添加或改變硬件配置，分布式數(shù)據(jù)庫(kù)，等等）
3. 我們的黃金規(guī)則是：首先優(yōu)化前端表現(xiàn)，這些東西耗費(fèi)了用戶端響應(yīng)時(shí)間中的80%。

一、從代碼之外，咱們有以下三種方法

1.運(yùn)用cdn技術(shù)

具體方式，可以Google一下。（大體的原理好像就是判斷訪問者的位置及訪問的內(nèi)容從而來選擇就近的服務(wù)器來處理用戶的請(qǐng)求）

2.加一個(gè)長(zhǎng)時(shí)間過期的頭部

Expires: Thu, 15 Apr 2010 20:00:00 GMT

瀏覽器會(huì)用緩存來減少http請(qǐng)求數(shù)來加快頁(yè)面加載的時(shí)間，如果頁(yè)面頭部加一個(gè)很長(zhǎng)的過期時(shí)間，瀏覽器就會(huì)一直緩存頁(yè)面里的元素。
不過這樣會(huì)帶來一個(gè)問題，就是如果頁(yè)面里的東西變動(dòng)的話就要改名字了，否則用戶端不會(huì)主動(dòng)刷新，在yahoo工作組用的是版本號(hào)，例如yahoo_2.0.6.js

3.Gzip壓縮

Gzip是現(xiàn)在最流行和最有效的壓縮方式，她是GNU開發(fā)的，RFC1952標(biāo)準(zhǔn)化。
（Gzip是在服務(wù)器端壓縮圖片，css，腳本等，傳送到用戶端的瀏覽器再解壓，這樣可以提高傳輸速度，不過對(duì)服務(wù)器的壓力會(huì)增大，一般選擇部分元素壓縮比較合適。