摘要：避免重定向重定向用和狀態(tài)碼，下面是一個有狀態(tài)碼的頭瀏覽器會自動跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。

減少Http請求:

1.盡量減少HTTP請求數(shù) 　　80%的終端用戶響應(yīng)時間都花在了前端上，其中大部分時間都在下載頁面上的各種組件：圖片，樣式表，腳本，F(xiàn)lash等等。減少組件數(shù)必然能夠減少頁面提交的HTTP請求數(shù)。這是讓頁面更快的關(guān)鍵。

2.減少頁面組件數(shù)的一種方式是簡化頁面設(shè)計(jì)。但有沒有一種方法可以在構(gòu)建復(fù)雜的頁面同時加快響應(yīng)時間呢？嗯，確實(shí)有魚和熊掌兼得的辦法。

3.合并文件是通過把所有腳本放在一個文件中的方式來減少請求數(shù)的，當(dāng)然，也可以合并所有的CSS。如果各個頁面的腳本和樣式不一樣的話，合并文件就是一項(xiàng)比較麻煩的工作了，但把這個作為站點(diǎn)發(fā)布過程的一部分確實(shí)可以提高響應(yīng)時間。

4.CSS Sprites是減少圖片請求數(shù)量的首選方式。把背景圖片都整合到一張圖片中，然后用CSS的background-image和background-position屬性來定位要顯示的部分。

5.圖像映射可以把多張圖片合并成單張圖片，總大小是一樣的，但減少了請求數(shù)并加速了頁面加載。圖片映射只有在圖像在頁面中連續(xù)的時候才有用，比如導(dǎo)航條。給image map設(shè)置坐標(biāo)的過程既無聊又容易出錯，用image map來做導(dǎo)航也不容易，所以不推薦用這種方式。

6.行內(nèi)圖片（Base64編碼）用data: URL模式來把圖片嵌入頁面。這樣會增加HTML文件的大小，把行內(nèi)圖片放在（緩存的）樣式表中是個好辦法，而且成功避免了頁面變“重”。但目前主流瀏覽器并不能很好地支持行內(nèi)圖片。

7.減少頁面的HTTP請求數(shù)是個起點(diǎn)，這是提升站點(diǎn)首次訪問速度的重要指導(dǎo)原則。

減少DNS查找:

1.域名系統(tǒng)建立了主機(jī)名和IP地址間的映射，就像電話簿上人名和號碼的映射一樣。當(dāng)你在瀏覽器輸入www.yahoo.com的時候，瀏覽器就會聯(lián)系DNS解析器返回服務(wù)器的IP地址。DNS是有成本的，它需要20到120毫秒去查找給定主機(jī)名的IP地址。在DNS查找完成之前，瀏覽器無法從主機(jī)名下載任何東西。

2.DNS查找被緩存起來更高效，由用戶的ISP（網(wǎng)絡(luò)服務(wù)提供商）或者本地網(wǎng)絡(luò)存在一個特殊的緩存服務(wù)器上，但還可以緩存在個人用戶的計(jì)算機(jī)上。DNS信息被保存在操作系統(tǒng)的DNS cache(微軟Windows上的”DNS客戶端服務(wù)”)里。大多數(shù)瀏覽器有獨(dú)立于操作系統(tǒng)的自己的cache。只要瀏覽器在自己的cache里還保留著這條記錄，它就不會向操作系統(tǒng)查詢DNS。

3.IE默認(rèn)緩存DNS查找30分鐘，寫在DnsCacheTimeout注冊表設(shè)置中。Firefox緩存1分鐘，可以用network.dnsCacheExpiration配置項(xiàng)設(shè)置。(Fasterfox把緩存時間改成了1小時 P.S. Fasterfox是FF的一個提速插件)

4.如果客戶端的DNS cache是空的（包括瀏覽器的和操作系統(tǒng)的），DNS查找數(shù)等于頁面上不同的主機(jī)名數(shù)，包括頁面URL，圖片，腳本文件，樣式表，F(xiàn)lash對象等等組件中的主機(jī)名，減少不同的主機(jī)名就可以減少DNS查找。

5.減少不同主機(jī)名的數(shù)量同時也減少了頁面能夠并行下載的組件數(shù)量，避免DNS查找削減了響應(yīng)時間，而減少并行下載數(shù)量卻增加了響應(yīng)時間。我的原則是把組件分散在2到4個主機(jī)名下，這是同時減少DNS查找和允許高并發(fā)下載的折中方案。

避免重定向 重定向用301和302狀態(tài)碼，下面是一個有301狀態(tài)碼的HTTP頭：

1.HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 　　瀏覽器會自動跳轉(zhuǎn)到Location域指明的URL。重定向需要的所有信息都在HTTP頭部，而響應(yīng)體一般是空的。其實(shí)額外的HTTP頭，比如Expires和Cache-Control也表示重定向。除此之外還有別的跳轉(zhuǎn)方式：refresh元標(biāo)簽和JavaScript，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的3xxHTTP狀態(tài)碼，主要是為了讓返回按鈕能正常使用。

2.牢記重定向會拖慢用戶體驗(yàn)，在用戶和HTML文檔之間插入重定向會延遲頁面上的所有東西，頁面無法渲染，組件也無法開始下載，直到HTML文檔被送達(dá)瀏覽器。

3.有一種常見的極其浪費(fèi)資源的重定向，而且web開發(fā)人員一般都意識不到這一點(diǎn)，就是URL尾部缺少一個斜線的時候。例如，跳轉(zhuǎn)到http://astrology.yahoo.com/as...://astrology.yahoo.com/astrology/的301響應(yīng)（注意添在尾部的斜線）。在Apache中可以用Alias，mod_rewrite或者DirectorySlash指令來取消不必要的重定向。

4.重定向最常見的用途是把舊站點(diǎn)連接到新的站點(diǎn)，還可以連接同一站點(diǎn)的不同部分，針對用戶的不同情況（瀏覽器類型，用戶帳號類型等等）做一些處理。用重定向來連接兩個網(wǎng)站是最簡單的，只需要少量的額外代碼。雖然在這些時候使用重定向減少了開發(fā)人員的開發(fā)復(fù)雜度，但降低了用戶體驗(yàn)。一種替代方案是用Alias和mod_rewrite，前提是兩個代碼路徑都在相同的服務(wù)器上。如果是因?yàn)橛蛎兓褂昧酥囟ㄏ?，就可以?chuàng)建一條CNAME（創(chuàng)建一個指向另一個域名的DNS記錄作為別名）結(jié)合Alias或者mod_rewrite指令。

讓Ajax可緩存:

1.Ajax的一個好處是可以給用戶提供即時反饋，因?yàn)樗軌驈暮笈_服務(wù)器異步請求信息。然而，用了Ajax就無法保證用戶在等待異步JavaScript和XML響應(yīng)返回期間不會非常無聊。在很多應(yīng)用程序中，用戶能夠一直等待取決于如何使用Ajax。例如，在基于web的電子郵件客戶端中，用戶為了尋找符合他們搜索標(biāo)準(zhǔn)的郵件消息，將會保持對Ajax請求返回結(jié)果的關(guān)注。重要的是，要記得“異步”并不意味著“即時”。

2.要提高性能，優(yōu)化這些Ajax響應(yīng)至關(guān)重要。最重要的提高Ajax性能的方法就是讓響應(yīng)變得可緩存，就像在添上Expires或者Cache-Control HTTP頭中討論的一樣。下面適用于Ajax的其它規(guī)則：

3.Gzip組件 減少DNS查找 壓縮JavaScript 避免重定向 配置ETags 　　我們一起看看例子，一個Web 2.0的電子郵件客戶端用了Ajax來下載用戶的通訊錄，以便實(shí)現(xiàn)自動完成功能。如果用戶從上一次使用之后再沒有修改過她的通訊錄，而且Ajax響應(yīng)是可緩存的，有尚未過期的Expires或者Cache-Control HTTP頭，那么之前的通訊錄就可以從緩存中讀出。必須通知瀏覽器，應(yīng)該繼續(xù)使用之前緩存的通訊錄響應(yīng)，還是去請求一個新的。可以通過給通訊錄的Ajax URL里添加一個表明用戶通訊錄最后修改時間的時間戳來實(shí)現(xiàn)，例如&t=1190241612。如果通訊錄從上一次下載之后再沒有被修改過，時間戳不變，通訊錄就將從瀏覽器緩存中直接讀出，從而避免一次額外的HTTP往返消耗。如果用戶已經(jīng)修改了通訊錄，時間戳也可以確保新的URL不會匹配緩存的響應(yīng)，瀏覽器將請求新的通訊錄條目。

4.即使Ajax響應(yīng)是動態(tài)創(chuàng)建的，而且可能只適用于單用戶，它們也可以被緩存，而這樣會讓你的Web 2.0應(yīng)用更快。

延遲加載組件:

可以湊近看看頁面并問自己：什么才是一開始渲染頁面所必須的？其余內(nèi)容都可以等會兒。

1.JavaScript是分隔onload事件之前和之后的一個理想選擇。例如，如果有JavaScript代碼和支持拖放以及動畫的庫，這些都可以先等會兒，因?yàn)橥戏旁厥窃陧撁孀畛蹁秩局蟮?。其它可以延遲加載的部分包括隱藏內(nèi)容（在某個交互動作之后才出現(xiàn)的內(nèi)容）和折疊的圖片。

2.工具可幫你減輕工作量：YUI Image Loader可以延遲加載折疊的圖片，還有YUI Get utility是一種引入JS和CSS的簡單方法。Yahoo!主頁就是一個例子，可以打開Firebug的網(wǎng)絡(luò)面板仔細(xì)看看。

3.最好讓性能目標(biāo)符合其它web開發(fā)最佳實(shí)踐，比如“漸進(jìn)增強(qiáng)”。如果客戶端支持JavaScript，可以提高用戶體驗(yàn)，但必須確保頁面在不支持JavaScript時也能正常工作。所以，在確定頁面運(yùn)行正常之后，可以用一些延遲加載腳本增強(qiáng)它，以支持一些拖放和動畫之類的華麗效果。

預(yù)加載組件:

預(yù)加載可能看起來和延遲加載是相反的，但它其實(shí)有不同的目標(biāo)。通過預(yù)加載組件可以充分利用瀏覽器空閑的時間來請求將來會用到的組件（圖片，樣式和腳本）。用戶訪問下一頁的時候，大部分組件都已經(jīng)在緩存里了，所以在用戶看來頁面會加載得更快。

實(shí)際應(yīng)用中有以下幾種預(yù)加載的類型：

1.無條件預(yù)加載——盡快開始加載，獲取一些額外的組件。google.com就是一個sprite圖片預(yù)加載的好例子，這個sprite圖片并不是google.com主頁需要的，而是搜索結(jié)果頁面上的內(nèi)容。 條件性預(yù)加載——根據(jù)用戶操作猜測用戶將要跳轉(zhuǎn)到哪里并據(jù)此預(yù)加載。在search.yahoo.com的輸入框里鍵入內(nèi)容后，可以看到那些額外組件是怎樣請求加載的。 提前預(yù)加載——在推出新設(shè)計(jì)之前預(yù)加載。經(jīng)常在重新設(shè)計(jì)之后會聽到：“這個新網(wǎng)站不錯，但比以前更慢了”，一部分原因是用戶訪問先前的頁面都是有舊緩存的，但新的卻是一種空緩存狀態(tài)下的體驗(yàn)?？梢酝ㄟ^在將要推出新設(shè)計(jì)之前預(yù)加載一些組件來減輕這種負(fù)面影響，老站可以利用瀏覽器空閑的時間來請求那些新站需要的圖片和腳本。

減少DOM元素的數(shù)量:

一個復(fù)雜的頁面意味著要下載更多的字節(jié)，而且用JavaScript訪問DOM也會更慢。舉個例子，想要添加一個事件處理器的時候，循環(huán)遍歷頁面上的500個DOM元素和5000個DOM元素是有區(qū)別的。

1.大量的DOM元素是一種征兆——頁面上有些內(nèi)容無關(guān)的標(biāo)記需要清理。正在用嵌套表格來布局嗎？還是為了修復(fù)布局問題而添了一堆的

后續(xù)還會整理，目前對性能的優(yōu)化先寫這么多........