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

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

[align=center][/align]

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

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

這里有提升和改進(jìn)的潛力。如果能減少一半的體積，就能減少40%的響應(yīng)時(shí)間。

改進(jìn)前端比改進(jìn)后端需要的時(shí)間和資源更少。（改進(jìn)后端要重新設(shè)計(jì)應(yīng)用程序規(guī)劃，代碼，尋找優(yōu)化代碼的方法，添加或改變硬件配置，分布式數(shù)據(jù)庫(kù)，等等）

我們的黃金規(guī)則是：首先優(yōu)化前端表現(xiàn)，這些東西耗費(fèi)了用戶(hù)端響應(yīng)時(shí)間中的80%。

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

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

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

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

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

3.gzip壓縮

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

4.避免重定向

重定向會(huì)減慢用戶(hù)體驗(yàn)，它會(huì)延遲所有的東西直至到達(dá)新頁(yè)面。一個(gè)最浪費(fèi)的重定向經(jīng)常會(huì)發(fā)生而我們的開(kāi)發(fā)者又會(huì)經(jīng)常忽略的就是比如 http://astrology.yahoo.com/astrology的結(jié)果是重定向到http://astrology.yahoo.com /astrology/ 在apache里用alias 或者mod_rewrite或者directoryslash解決。
從一個(gè)舊網(wǎng)站跳轉(zhuǎn)到新網(wǎng)站也是經(jīng)常要用到重定向，還有就是連接一個(gè)網(wǎng)站中的不同部分和在某些情況下（比如不同瀏覽器，不同的用戶(hù)帳號(hào)類(lèi)型，等等）的用戶(hù)導(dǎo)向。用重定向很簡(jiǎn)單，而且只需要一點(diǎn)額外的代碼，雖然在這些情況下用重定向減少了開(kāi)發(fā)者的復(fù)雜度，但它降低了用戶(hù)的體驗(yàn)，變通的做法是用alias和 mod_rewrite如果兩個(gè)部分是在同一主機(jī)上的話(huà)，如果是由域名變更引起的重定向，變通的做法是通過(guò)alias或mod_rewrite創(chuàng)建一個(gè) cname（一個(gè)dns記錄，創(chuàng)建一個(gè)別名，從一個(gè)域名指向另一個(gè)域名）

5.配置etags

etags（entity tags）是服務(wù)器和瀏覽器的一個(gè)功能，它用來(lái)判斷瀏覽器緩存里的元素是否和原來(lái)服務(wù)器上的一致。etags比last-modified date更具有彈性，它用一個(gè)獨(dú)一無(wú)二的字符串來(lái)標(biāo)識(shí)一個(gè)元素的版本。
源服務(wù)器用響應(yīng)頭里的etag來(lái)特定一個(gè)元素的etag：
http/1.1 200 ok
last-modified: tue, 12 dec 2006 03:03:59 gmt
etag: “10c24bc-4ab-457e1c1f”
content-length: 12195
之后，如果瀏覽器要驗(yàn)證這個(gè)元素，它就會(huì)用if-none-match頭來(lái)回傳etag到源服務(wù)器。如果符合的話(huà)，一個(gè)304狀態(tài)的代碼就會(huì)從源服務(wù)器返回到瀏覽器，這樣源服務(wù)器就節(jié)省了傳輸具體數(shù)據(jù)的開(kāi)銷(xiāo)。
get /i/yahoo.gif http/1.1
host: us.yimg.com
if-modified-since: tue, 12 dec 2006 03:03:59 gmt
if-none-match: “10c24bc-4ab-457e1c1f”
http/1.1 304 not modified

用etags的問(wèn)題就在于它會(huì)標(biāo)識(shí)那個(gè)特定的服務(wù)器，如果換了服務(wù)器，etags也就失去了原有的功能，但是這種現(xiàn)在在網(wǎng)絡(luò)上太常見(jiàn)了，因?yàn)槲覀兘?jīng)常用服務(wù)器集群。默認(rèn)情況下，apache和iis會(huì)在etag中內(nèi)嵌數(shù)據(jù)，這樣會(huì)動(dòng)態(tài)減少驗(yàn)證成功的機(jī)會(huì)。

apache1.3和2.x的etag格式是inode-size-timestamp。雖然一個(gè)文件可能在不同服務(wù)器的同一個(gè)目錄，同樣的大小，安全級(jí)，時(shí)間戳等等，它的inode會(huì)隨著服務(wù)器的不同而不同。

iis5.0和6.0有同樣類(lèi)似etags的東西，叫時(shí)間戳：changenumber（更改號(hào)），更改號(hào)是一個(gè)用來(lái)追蹤iis配置變化的計(jì)數(shù)器，changenumber在不同iis服務(wù)器之間是不一樣的。

它最終的問(wèn)題就是，iis和apache產(chǎn)生的etags會(huì)在不同服務(wù)器之間無(wú)法匹配，這樣我們的瀏覽器就無(wú)法得到我們期待的304響應(yīng)，而給我們的是一個(gè)普通的200響應(yīng)，和正常的數(shù)據(jù)流。如果你的網(wǎng)站只有一個(gè)服務(wù)器還無(wú)所謂，如果是集群，而你用的是默認(rèn)的etag配置，你的用戶(hù)就會(huì)獲得更慢的頁(yè)面，你的服務(wù)器也會(huì)有更高的負(fù)載，消耗更大的帶寬資源，代理也無(wú)法高效緩存你的內(nèi)容，甚至即使你有一個(gè)長(zhǎng)時(shí)間過(guò)期的頭部（按：見(jiàn)第三條規(guī)則），也不會(huì)阻止它重新載入內(nèi)容。

如果你不想發(fā)揮etags提供的這個(gè)彈性驗(yàn)證模型的優(yōu)勢(shì)，你最好關(guān)掉它。apache中關(guān)掉它的方法是在apache的配置文件中寫(xiě)這么一句：
fileetag none

二、我們從代碼方面來(lái)探討有如下方法

1.減少http請(qǐng)求數(shù)

圖片，css，script，flash，等等這些都會(huì)增加http請(qǐng)求數(shù)，減少這些元素的數(shù)量能減少響應(yīng)時(shí)間。

css sprites技術(shù)能減少圖片的請(qǐng)求數(shù)，把零散的小圖片放到一起，運(yùn)用background-position來(lái)改變背景圖片的位置，前提是html元素事先定義好寬高，其實(shí)就像一個(gè)遮罩，移動(dòng)背景就會(huì)看到不同的景象。

內(nèi)嵌圖像 用data:url scheme的方式把圖片內(nèi)容代碼直接嵌入html代碼中，這樣會(huì)增大html代碼的體積，改進(jìn)的方式是把內(nèi)嵌圖片嵌入到css中（css被緩存），這樣就會(huì)更好的減少http請(qǐng)求數(shù)而且不增大html的體積。

很多用戶(hù)都是在空緩存的情況下進(jìn)入你的網(wǎng)站的，這樣第一次的速度就會(huì)顯得很重要。

第一條規(guī)則是最重要的一條規(guī)則。

2.把樣式表放到頂部

我們發(fā)現(xiàn)把css放到文檔頭部會(huì)讓網(wǎng)頁(yè)加載得更快。因?yàn)檫@樣可以讓頁(yè)面逐漸加載。
把樣式表放到接近底部的問(wèn)題是它阻止了頁(yè)面元素的逐漸顯示。這樣還會(huì)導(dǎo)致“flash of unstyled content” 即在樣式表加載之前頁(yè)面內(nèi)容是以沒(méi)有樣式的形式顯示出來(lái)的，待加載完樣式后，頁(yè)面重繪，內(nèi)容一閃即改變了樣式表現(xiàn)。

3.把腳本放到底部

把腳本放到盡可能底部的地方，一個(gè)原因是讓頁(yè)面逐漸渲染，另一個(gè)是實(shí)現(xiàn)更好的并行下載。

對(duì)于腳本，腳本以下的內(nèi)容被阻止逐漸加載了，因?yàn)橹挥挟?dāng)下載完腳本以后才會(huì)下載下面的內(nèi)容，第二個(gè)腳本引起的問(wèn)題是阻止平行下載。 “http/1.1 specification”建議瀏覽器對(duì)一個(gè)域名，同一時(shí)間下載數(shù)不超過(guò)2個(gè)（按：實(shí)際監(jiān)測(cè)發(fā)現(xiàn)一般有超過(guò)2個(gè)），我曾經(jīng)讓ie并行下載100個(gè)圖片。當(dāng)腳本正在下載的時(shí)候，瀏覽器不會(huì)開(kāi)始下載任何東西。

4.避免css expressions

css expressions 是一個(gè)有力（和危險(xiǎn)）的方式動(dòng)態(tài)的改變css的屬性。他們自ie5就開(kāi)始被支持，舉個(gè)例子，用css expression可以讓背景色每個(gè)小時(shí)輪換一次。但是被非ie瀏覽器忽略的。

background-color: expression( (new date()).gethours()%2 ? “#b8d4ff” : “#f08a00″ );

expressions的問(wèn)題就在與它的計(jì)算頻率絕對(duì)超出我們的想象，甚至當(dāng)我們移動(dòng)鼠標(biāo)，都會(huì)引起頁(yè)面的重繪！

下面是舉例頁(yè)面

減少css expressions計(jì)算次數(shù)的一個(gè)方法就是使用一次性的expressions。 當(dāng)?shù)谝淮蝒xpression計(jì)算出一個(gè)明確的值，就讓樣式等于這個(gè)值，不再變動(dòng)。如果樣式的屬性一定要?jiǎng)討B(tài)的改變，就用時(shí)間句柄吧！

5.讓腳本和樣式外延

javascript和css應(yīng)該是外部調(diào)用還是內(nèi)嵌呢？
用外部調(diào)用文件的方式更快，因?yàn)樗麄兪强梢员痪彺娴?，如果是?nèi)嵌在頁(yè)面中他們就無(wú)法被緩存了！想想如果用戶(hù)要在你的網(wǎng)站看很多很多的頁(yè)面，如果都是使用同一個(gè)外部腳本和樣式，那么他們一旦被緩存，就再也不需要下載了，這樣會(huì)給你帶來(lái)很大的潛在好處。

6.減小腳本體積

有兩個(gè)比較流行的工具是用來(lái)減小腳本的體積的–jsmin和yui compressor。（按：這個(gè)壓縮和gzip壓縮是不一樣的，gzip是傳輸壓縮，這個(gè)是代碼壓縮）。

我們以上方法，讀者應(yīng)該適當(dāng)?shù)倪x擇或配合使用，我們?cè)谶x擇方法的原則是應(yīng)該以最低的代價(jià)來(lái)完成客戶(hù)端的功能。

原文:web前端優(yōu)化的體會(huì)