閱讀目錄
內容部分
css部分
js部分
javascript, css
cookie
行動端
伺服器
1.儘量減少HTTP請求數
80%的終端使用者響應時間都花在了前端上，其中大部分時間都在下載頁面上的各種元件：圖片，樣式表，指令碼，Flash等等。減少元件數必然能夠減少頁面提交的HTTP請求數。這是讓頁面更快的關鍵。
減少頁面元件數的一種方式是簡化頁面設計。但有沒有一種方法可以在構建複雜的頁面同時加快響應時間呢？嗯，確實有魚和熊掌兼得的辦法。
合併檔案是通過把所有指令碼放在一個檔案中的方式來減少請求數的，當然，也可以合併所有的CSS。如果各個頁面的指令碼和樣式不一樣的話，合併檔案就是一項比較麻煩的工作了，但把這個作爲站點發布過程的一部分確實可以提高響應時間。
CSS Sprites是減少圖片請求數量的首選方式。把背景圖片都整合到一張圖片中，然後用CSS的background-image和background-position屬性來定位要顯示的部分。
影象對映可以把多張圖片合併成單張圖片，總大小是一樣的，但減少了請求數並加速了頁面載入。圖片對映只有在影象在頁面中連續的時候纔有用，比如導覽列。給image map設定座標的過程既無聊又容易出錯，用image map來做導航也不容易，所以不推薦用這種方式。
行內圖片（Base64編碼）用data: URL模式來把圖片嵌入頁面。這樣會增加HTML檔案的大小，把行內圖片放在（快取的）樣式表中是個好辦法，而且成功避免了頁面變「重」。但目前主流瀏覽器並不能很好地支援行內圖片。
減少頁面的HTTP請求數是個起點，這是提升站點首次存取速度的重要指導原則。
2.減少DNS查詢
域名系統建立了主機名和IP地址間的對映，就像電話簿上人名和號碼的對映一樣。當你在瀏覽器輸入www.yahoo.com的時候，瀏覽器就會聯繫DNS解析器返回伺服器的IP地址。DNS是有成本的，它需要20到120毫秒去查詢給定主機名的IP地址。在DNS查詢完成之前，瀏覽器無法從主機名下載任何東西。
DNS查詢被快取起來更高效，由使用者的ISP（網路服務提供商）或者本地網路存在一個特殊的快取伺服器上，但還可以快取在個人用戶的計算機上。DNS資訊被儲存在操作系統的DNS cache(微軟Windows上的」DNS用戶端服務」)裡。大多數瀏覽器有獨立於操作系統的自己的cache。只要瀏覽器在自己的cache裡還保留着這條記錄，它就不會向操作系統查詢DNS。
IE預設快取DNS查詢30分鐘，寫在DnsCacheTimeout註冊表設定中。Firefox快取1分鐘，可以用network.dnsCacheExpiration設定項設定。(Fasterfox把快取時間改成了1小時 P.S. Fasterfox是FF的一個提速外掛)
如果用戶端的DNS cache是空的（包括瀏覽器的和操作系統的），DNS查詢數等於頁面上不同的主機名數，包括頁面URL，圖片，指令碼檔案，樣式表，Flash物件等等元件中的主機名，減少不同的主機名就可以減少DNS查詢。
減少不同主機名的數量同時也減少了頁面能夠並行下載的元件數量，避免DNS查詢削減了響應時間，而減少並行下載數量卻增加了響應時間。我的原則是把元件分散在2到4個主機名下，這是同時減少DNS查詢和允許高併發下載的折中方案。
3.避免重定向
重定向用301和302狀態碼，下面 下麪是一個有301狀態碼的HTTP頭：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
瀏覽器會自動跳轉到Location域指明的URL。重定向需要的所有資訊都在HTTP頭部，而響應體一般是空的。其實額外的HTTP頭，比如Expires和Cache-Control也表示重定向。除此之外還有別的跳轉方式：refresh元標籤和JavaScript，但如果你必須得做重定向，最好用標準的3xxHTTP狀態碼，主要是爲了讓返回按鈕能正常使用。
牢記重定向會拖慢使用者體驗，在使用者和HTML文件之間插入重定向會延遲頁面上的所有東西，頁面無法渲染，元件也無法開始下載，直到HTML文件被送達瀏覽器。
有一種常見的極其浪費資源的重定向，而且web開發人員一般都意識不到這一點，就是URL尾部缺少一個斜線的時候。例如，跳轉到http://astrology.yahoo.com/astrology會返回一個重定向到http://astrology.yahoo.com/astrology/的301響應（注意添在尾部的斜線）。在Apache中可以用Alias，mod_rewrite或者DirectorySlash指令來取消不必要的重定向。
重定向最常見的用途是把舊站點連線到新的站點，還可以連線同一站點的不同部分，針對使用者的不同情況（瀏覽器型別，使用者帳號型別等等）做一些處理。用重定向來連線兩個網站是最簡單的，只需要少量的額外程式碼。雖然在這些時候使用重定向減少了開發人員的開發複雜度，但降低了使用者體驗。一種替代方案是用Alias和mod_rewrite，前提是兩個程式碼路徑都在相同的伺服器上。如果是因爲域名變化而使用了重定向，就可以建立一條CNAME（建立一個指向另一個域名的DNS記錄作爲別名）結合Alias或者mod_rewrite指令。
4.讓Ajax可快取
Ajax的一個好處是可以給使用者提供即時反饋，因爲它能夠從後臺伺服器非同步請求資訊。然而，用了Ajax就無法保證使用者在等待非同步JavaScript和XML響應返回期間不會非常無聊。在很多應用程式中，使用者能夠一直等待取決於如何使用Ajax。例如，在基於web的電子郵件用戶端中，使用者爲了尋找符合他們搜尋標準的郵件訊息，將會保持對Ajax請求返回結果的關注。重要的是，要記得「非同步」並不意味着「即時」。
要提高效能，優化這些Ajax響應至關重要。最重要的提高Ajax效能的方法就是讓響應變得可快取，就像在添上Expires或者Cache-Control HTTP頭中討論的一樣。下面 下麪適用於Ajax的其它規則：
Gzip元件
減少DNS查詢
壓縮JavaScript
避免重定向
設定ETags
我們一起看看例子，一個Web 2.0的電子郵件用戶端用了Ajax來下載使用者的通訊錄，以便實現自動完成功能。如果使用者從上一次使用之後再沒有修改過她的通訊錄，而且Ajax響應是可快取的，有尚未過期的Expires或者Cache-Control HTTP頭，那麼之前的通訊錄就可以從快取中讀出。必須通知瀏覽器，應該繼續使用之前快取的通訊錄響應，還是去請求一個新的。可以通過給通訊錄的Ajax URL裡新增一個表明使用者通訊錄最後修改時間的時間戳來實現，例如&t=1190241612。如果通訊錄從上一次下載之後再沒有被修改過，時間戳不變，通訊錄就將從瀏覽器快取中直接讀出，從而避免一次額外的HTTP往返消耗。如果使用者已經修改了通訊錄，時間戳也可以確保新的URL不會匹配快取的響應，瀏覽器將請求新的通訊錄條目。
即使Ajax響應是動態建立的，而且可能只適用於單使用者，它們也可以被快取，而這樣會讓你的Web 2.0應用更快。
5.延遲載入元件
可以湊近看看頁面並問自己：什麼纔是一開始渲染頁面所必須的？其餘內容都可以等會兒。
JavaScript是分隔onload事件之前和之後的一個理想選擇。例如，如果有JavaScript程式碼和支援拖放以及動畫的庫，這些都可以先等會兒，因爲拖放元素是在頁面最初渲染之後的。其它可以延遲載入的部分包括隱藏內容（在某個互動動作之後纔出現的內容）和摺疊的圖片。
工具可幫你減輕工作量：YUI Image Loader可以延遲載入摺疊的圖片，還有YUI Get utility是一種引入JS和CSS的簡單方法。Yahoo!主頁就是一個例子，可以開啓Firebug的網路面板仔細看看。
最好讓效能目標符合其它web開發最佳實踐，比如「漸進增強」。如果用戶端支援JavaScript，可以提高使用者體驗，但必須確保頁面在不支援JavaScript時也能正常工作。所以，在確定頁面執行正常之後，可以用一些延遲載入指令碼增強它，以支援一些拖放和動畫之類的華麗效果。
6.預載入元件
預載入可能看起來和延遲載入是相反的，但它其實有不同的目標。通過預載入元件可以充分利用瀏覽器空閒的時間來請求將來會用到的元件（圖片，樣式和指令碼）。使用者存取下一頁的時候，大部分元件都已經在快取裡了，所以在使用者看來頁面會載入得更快。
實際應用中有以下幾種預載入的型別：
無條件預載入——儘快開始載入，獲取一些額外的元件。google.com就是一個sprite圖片預載入的好例子，這個sprite圖片並不是google.com主頁需要的，而是搜尋結果頁面上的內容。
條件性預載入——根據使用者操作猜測使用者將要跳轉到哪裏並據此預載入。在search.yahoo.com的輸入框裡鍵入內容後，可以看到那些額外元件是怎樣請求載入的。
提前預載入——在推出新設計之前預載入。經常在重新設計之後會聽到：「這個新網站不錯，但比以前更慢了」，一部分原因是使用者存取先前的頁面都是有舊快取的，但新的卻是一種空快取狀態下的體驗。可以通過在將要推出新設計之前預載入一些元件來減輕這種負面影響，老站可以利用瀏覽器空閒的時間來請求那些新站需要的圖片和指令碼。
7.減少DOM元素的數量
一個複雜的頁面意味着要下載更多的位元組，而且用JavaScript存取DOM也會更慢。舉個例子，想要新增一個事件處理器的時候，回圈遍歷頁面上的500個DOM元素和5000個DOM元素是有區別的。
大量的DOM元素是一種徵兆——頁面上有些內容無關的標記需要清理。正在用巢狀表格來佈局嗎？還是爲了修復佈局問題而添了一堆的
YUI CSS utilities對佈局有很大幫助：grids.css針對整體佈局，fonts.css和reset.css可以用來去除瀏覽器的預設格式。這是個開始清理和思考標記的好機會，例如只在語意上有意義的時候使用
DOM元素的數量很容易測試，只需要在Firebug的控制檯裡輸入：
document.getElementsByTagName(’*’).length
那麼多少DOM元素纔算是太多呢？可以參考其它類似的標記良好的頁面，例如Yahoo!主頁是一個相當繁忙的頁面，但只有不到700個元素（HTML標籤）。
8.跨域分離元件
分離元件可以最大化並行下載，但要確保只用不超過2-4個域，因爲存在DNS查詢的代價。例如，可以把HTML和動態內容部署在www.example.org，而把靜態元件分離到static1.example.org和static2.example.org。
9.儘量少用iframe
用iframe可以把一個HTML文件插入到父文件裡，重要的是明白iframe是如何工作的並高效地使用它。
引入緩慢的第三方內容，比如標誌和廣告
安全沙箱
並行下載指令碼
代價高昂，即使是空白的iframe
阻塞頁面載入
非語意
10.杜絕404
HTTP請求代價高昂，完全沒有必要用一個HTTP請求去獲取一個無用的響應（比如404 Not Found），只會拖慢使用者體驗而沒有任何好處。
有些站點用的是有幫助的404——「你的意思是xxx？」，這樣做有利於使用者體驗，，但也浪費了伺服器資源（比如數據庫等等）。最糟糕的是鏈接到的外部JavaScript有錯誤而且結果是404。首先，這種下載將阻塞並行下載。其次，瀏覽器會試圖解析404響應體，因爲它是JavaScript程式碼，需要找出其中可用的部分。
11.避免使用CSS表達式
用CSS表達式動態設定CSS屬性，是一種強大又危險的方式。從IE5開始支援，但從IE8起就不推薦使用了。例如，可以用CSS表達式把背景顏色設定成按小時交替的：
1
background-color: expression( (new Date()).getHours()%2 ? 「#B8D4FF」 : 「#F08A00」 );
12.選擇捨棄@import
前面提到了一個最佳實踐：爲了實現逐步渲染，CSS應該放在頂部。
在IE中用@import與在底部用效果一樣，所以最好不要用它。
13.避免使用濾鏡
IE專有的AlphaImageLoader濾鏡可以用來修復IE7之前的版本中半透明PNG圖片的問題。在圖片載入過程中，這個濾鏡會阻塞渲染，卡住瀏覽器，還會增加記憶體消耗而且是被應用到每個元素的，而不是每個圖片，所以會存在一大堆問題。
最好的方法是乾脆不要用AlphaImageLoader，而優雅地降級到用在IE中支援性很好的PNG8圖片來代替。如果非要用AlphaImageLoader，應該用下劃線hack：_filter來避免影響IE7及更高版本的使用者。
14.把樣式表放在頂部
在Yahoo!研究效能的時候，我們發現把樣式表放到文件的HEAD部分能讓頁面看起來載入地更快。這是因爲把樣式表放在head裡能讓頁面逐步渲染。
關注效能的前端工程師想讓頁面逐步渲染。也就是說，我們想讓瀏覽器儘快顯示已有內容，這在頁面上有一大堆內容或者使用者網速很慢時顯得尤爲重要。給使用者顯示反饋（比如進度指標）的重要性已經被廣泛研究過，並且被記錄下來了。在我們的例子中，HTML頁面就是進度指標！當瀏覽器逐漸載入頁面頭部，導覽列，頂部logo等等內容的時候，這些都被正在等待頁面載入的使用者當作反饋，能夠提高整體使用者體驗。
15.去除重複指令碼
頁面含有重複的指令碼檔案會影響效能，這可能和你想象的不一樣。在對美國前10大web站點的評審中，發現只有2個站點含有重複指令碼。兩個主要原因增加了在單一頁面中出現重複指令碼的機率：團隊大小和指令碼數量。在這種情況下，重複指令碼會建立不必要的HTTP請求，執行無用的JavaScript程式碼，而影響頁面效能。
IE會產生不必要的HTTP請求，而Firefox不會。在IE中，如果一個不可快取的外部指令碼被頁面引入了兩次，它會在頁面載入時產生兩個HTTP請求。即使指令碼是可快取的，在使用者重新載入頁面時也會產生額外的HTTP請求。
除了產生沒有意義的HTTP請求之外，多次對指令碼求值也會浪費時間。因爲無論指令碼是否可快取，在Firefox和IE中都會執行冗餘的JavaScript程式碼。
避免不小心把相同指令碼引入兩次的一種方法就是在模版系統中實現指令碼管理模組。典型的指令碼引入方法就是在HTML頁面中用SCRIPT標籤：
16.儘量減少DOM存取
用JavaScript存取DOM元素是很慢的，所以，爲了讓頁面反應更迅速，應該：
快取已存取過的元素的索引
先「離線」更新節點，再把它們添到DOM樹上
避免用JavaScript修復佈局問題
17.用智慧的事件處理器
有時候感覺頁面反映不夠靈敏，是因爲有太多頻繁執行的事件處理器被新增到了DOM樹的不同元素上，這就是推薦使用事件委託的原因。如果一個div裏面有10個按鈕，應該只給div容器新增一個事件處理器，而不是給每個按鈕都新增一個。事件能夠冒泡，所以可以捕獲事件並得知哪個按鈕是事件源。
18.把指令碼放在底部
指令碼會阻塞並行下載，HTTP/1.1官方文件建議瀏覽器每個主機名下並行下載的元件數不要超過兩個，如果圖片來自多個主機名，並行下載的數量就可以超過兩個。如果指令碼正在下載，瀏覽器就不開始任何其它下載任務，即使是在不同主機名下的。
有時候，並不容易把指令碼移動到底部。舉個例子，如果指令碼是用document.write插入到頁面內容中的，就沒辦法再往下移了。還可能存在作用域問題，在多數情況下，這些問題都是可以解決的。
一個常見的建議是用推遲（deferred）指令碼，有DEFER屬性的指令碼意味着不能含有document.write，並且提示瀏覽器告訴他們可以繼續渲染。不幸的是，Firefox不支援DEFER屬性。在IE中，指令碼可能被推遲，但不盡如人意。如果指令碼可以推遲，我們就可以把它放到頁面底部，頁面就可以更快地載入。
**javascript, css
19.把JavaScript和CSS放到外面**
很多效能原則都是關於如何管理外部元件的，然而，在這些顧慮出現之前你應該問一個更基礎的問題：應該把JavaScript和CSS放到外部檔案中還是直接寫在頁面裡？
實際上，用外部檔案可以讓頁面更快，因爲JavaScript和CSS檔案會被快取在瀏覽器。HTML文件中的行內JavaScript和CSS在每次請求該HTML文件的時候都會重新下載。這樣做減少了所需的HTTP請求數，但增加了HTML文件的大小。另一方面，如果JavaScript和CSS在外部檔案中，並且已經被瀏覽器快取起來了，那麼我們就成功地把HTML文件變小了，而且還沒有增加HTTP請求數。
20.壓縮JavaScript和CSS
壓縮具體來說就是從程式碼中去除不必要的字元以減少大小，從而提升載入速度。程式碼最小化就是去掉所有註釋和不必要的空白字元（空格，換行和tab）。在JavaScript中這樣做能夠提高響應效能，因爲要下載的檔案變小了。兩個最常用的JavaScript程式碼壓縮工具是JSMin和YUI Compressor，YUI compressor還可以壓縮CSS。
混淆是一種可選的原始碼優化措施，要比壓縮更復雜，所以混淆過程也更容易產生bug。在對美國前十的網站調查中，壓縮可以縮小21%，而混淆能縮小25%。雖然混淆的縮小程度更高，但比壓縮風險更大。
除了壓縮外部指令碼和樣式，行內的
21.優化圖片
嘗試把GIF格式轉換成PNG格式，看看是否節省空間。在所有的PNG圖片上執行pngcrush（或者其它PNG優化工具）
22.優化CSS Sprite
在Sprite圖片中橫向排列一般都比縱向排列的最終檔案小
組合Sprite圖片中的相似顏色可以保持低色數，最理想的是256色以下PNG8格式
「對行動端友好」，不要在Sprite圖片中留下太大的空隙。雖然不會在很大程度上影響圖片檔案的大小，但這樣做可以節省使用者代理把圖片解壓成畫素對映時消耗的記憶體。100×100的圖片是1萬個畫素，而1000×1000的圖片就是100萬個畫素了。
23.不要用HTML縮放圖片
不要因爲在HTML中可以設定寬高而使用本不需要的大圖。如果需要
24.用小的可快取的favicon.ico
favicon.ico是放在伺服器根目錄的圖片，它會帶來一堆麻煩，因爲即便你不管它，瀏覽器也會自動請求它，所以最好不要給一個404 Not Found響應。而且只要在同一個伺服器上，每次請求它時都會發送cookie，此外這個圖片還會幹擾下載順序，例如在IE中，當你在onload中請求額外元件時，將會先下載favicon。
所以爲了緩解favicon.ico的缺點，應該確保：
足夠小，最好在1K以下
設定合適的有效期HTTP頭（以後如果想換的話就不能重新命名了），把有效期設定爲幾個月後一般比較安全，可以通過檢查當前favicon.ico的最後修改日期來確保變更能讓瀏覽器知道。
25.給Cookie減肥
使用cookie的原因有很多，比如授權和個性化。HTTP頭中cookie資訊在web伺服器和瀏覽器之間交換。重要的是保證cookie儘可能的小，以最小化對使用者響應時間的影響。
清除不必要的cookie
保證cookie儘可能小，以最小化對使用者響應時間的影響
注意給cookie設定合適的域級別，以免影響其它子域
設定合適的有效期，更早的有效期或者none可以更快的刪除cookie，提高使用者響應時間
26.把元件放在不含cookie的域下
當瀏覽器發送對靜態影象的請求時，cookie也會一起發送，而伺服器根本不需要這些cookie。所以它們只會造成沒有意義的網路通訊量，應該確保對靜態元件的請求不含cookie。可以建立一個子域，把所有的靜態元件都部署在那兒。
如果域名是www.example.org，可以把靜態元件部署到static.example.org。然而，如果已經在頂級域example.org或者www.example.org設定了cookie，那麼所有對static.example.org的請求都會含有這些cookie。這時候可以再買一個新域名，把所有的靜態元件部署上去，並保持這個新域名不含cookie。Yahoo!用的是yimg.com，YouTube是ytimg.com，Amazon是images-amazon.com等等。
把靜態元件部署在不含cookie的域下還有一個好處是有些代理可能會拒絕快取帶cookie的元件。有一點需要注意：如果不知道應該用example.org還是www.example.org作爲主頁，可以考慮一下cookie的影響。省略www的話，就只能把cookie寫到*.example.org，所以因爲效能原因最好用www子域，並且把cookie寫到這個子域下。
27.保證所有元件都小於25K
這個限制是因爲iPhone不能快取大於25K的元件，注意這裏指的是未壓縮的大小。這就是爲什麼縮減內容本身也很重要，因爲單純的gzip可能不夠。
28.把元件打包到一個複合文件裡
把各個元件打包成一個像有附件的電子郵件一樣的複合文件裡，可以用一個HTTP請求獲取多個元件（記住一點：HTTP請求是代價高昂的）。用這種方式的時候，要先檢查使用者代理是否支援（iPhone就不支援）。
回到頂部
伺服器
29.Gzip元件
前端工程師可以想辦法明顯地縮短通過網路傳輸HTTP請求和響應的時間。毫無疑問，終端使用者的頻寬速度，網路服務商，對等交換點的距離等等，都是開發團隊所無法控制的。但還有別的能夠影響響應時間的因素，壓縮可以通過減少HTTP響應的大小來縮短響應時間。
從HTTP/1.1開始，web用戶端就有了支援壓縮的Accept-Encoding HTTP請求頭。
1
Accept-Encoding: gzip, deflate
如果web伺服器看到這個請求頭，它就會用用戶端列出的一種方式來壓縮響應。web伺服器通過Content-Encoding相應頭來通知用戶端。
1
Content-Encoding: gzip
儘可能多地用gzip壓縮能夠給頁面減肥，這也是提升使用者體驗最簡單的方法。
30.避免圖片src屬性爲空
Image with empty string src屬性是空字串的圖片很常見，主要以兩種形式出現：
straight HTML
JavaScript
var img = new Image();
img.src = 「」;
這兩種形式都會引起相同的問題：瀏覽器會向伺服器發送另一個請求。
31.設定ETags
實體標籤（ETags），是伺服器和瀏覽器用來決定瀏覽器快取中元件與源伺服器中的元件是否匹配的一種機制 機製（「實體」也就是元件：圖片，指令碼，樣式表等等）。新增ETags可以提供一種實體驗證機制 機製，比最後修改日期更加靈活。一個ETag是一個字串，作爲一個元件某一具體版本的唯一識別符號。唯一的格式約束是字串必須用引號括起來，源伺服器用相應頭中的ETag來指定元件的ETag：
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: 「10c24bc-4ab-457e1c1f」
Content-Length: 12195
然後，如果瀏覽器必須驗證一個元件，它用If-None-Match請求頭來把ETag傳回源伺服器。如果ETags匹配成功，會返回一個304狀態碼，這樣就減少了12195個位元組的響應體。
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
32.對Ajax用GET請求
Yahoo!郵箱團隊發現使用XMLHttpRequest時，瀏覽器的POST請求是通過一個兩步的過程來實現的：先發送HTTP頭，在發送數據。所以最好用GET請求，它只需要發送一個TCP報文（除非cookie特別多）。IE的URL長度最大值是2K，所以如果要發送的數據超過2K就無法使用GET了。
POST請求的一個有趣的副作用是實際上沒有發送任何數據，就像GET請求一樣。正如HTTP說明文件中描述的，GET請求是用來檢索資訊的。所以它的語意只是用GET請求來請求數據，而不是用來發送需要儲存到伺服器的數據。
33.儘早清空緩衝區
當使用者請求一個頁面時，伺服器需要用大約200到500毫秒來組裝HTML頁面，在這期間，瀏覽器閒等着數據到達。PHP中有一個flush()函數，允許給瀏覽器發送一部分已經準備完畢的HTML響應，以便瀏覽器可以在後台準備剩餘部分的同時開始獲取元件，好處主要體現在很忙的後臺或者很「輕」的前端頁面上（P.S. 也就是說，響應時耗主要在後台方面時最能體現優勢）。
較理想的清空緩衝區的位置是HEAD後面，因爲HTML的HEAD部分通常更容易生成，並且允許引入任何CSS和JavaScript檔案，這樣就可以讓瀏覽器在後台還在處理的時候就開始並行獲取元件。
34.使用CDN（內容分發網路）
使用者與伺服器的物理距離對響應時間也有影響。把內容部署在多個地理位置分散的伺服器上能讓使用者更快地載入頁面。但具體要怎麼做呢？
實現內容在地理位置上分散的第一步是：不要嘗試去重新設計你的web應用程式來適應分佈式結構。這取決於應用程式，改變結構可能包括一些讓人望而生畏的任務，比如同步對談狀態和跨伺服器複製數據庫事務（翻譯可能不準 不準確）。縮短使用者和內容之間距離的提議可能被推遲，或者根本不可能通過，就是因爲這個難題。
記住終端使用者80%到90%的響應時間都花在下載頁面元件上了：圖片，樣式，指令碼，Flash等等，這是業績黃金法則。最好先分散靜態內容，而不是一開始就重新設計應用程式結構。這不僅能夠大大減少響應時間，還更容易表現出CDN的功勞。
內容分發網路（CDN）是一組分散在不同地理位置的web伺服器，用來給使用者更高效地發送內容。典型地，選擇用來發送內容的伺服器是基於網路距離的衡量標準的。例如：選跳數（hop）最少的或者響應時間最快的伺服器。
35.添上Expires或者Cache-Control HTTP頭
這條規則有兩個方面：
對於靜態元件：通過設定一個遙遠的將來時間作爲Expires來實現永不失效
多餘動態元件：用合適的Cache-ControlHTTP頭來讓瀏覽器進行條件性的請求
網頁設計越來越豐富，這意味着頁面裡有更多的指令碼，圖片和Flash。站點的新訪客可能還是不得不提交幾個HTTP請求，但通過使用有效期能讓元件變得可快取，這避免了在接下來的瀏覽過程中不必要的HTTP請求。有效期HTTP頭通常被用在圖片上，但它們應該用在所有元件上，包括指令碼、樣式和Flash元件。
瀏覽器（和代理）用快取來減少HTTP請求的數目和大小，讓頁面能夠更快載入。web伺服器通過有效期HTTP響應頭來告訴用戶端，頁面的各個元件應該被快取多久。用一個遙遠的將來時間做有效期，告訴瀏覽器這個響應在2010年4月15日前不會改變。
1
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你用的是Apache伺服器，用ExpiresDefault指令來設定相對於當前日期的有效期。下面 下麪的例子設定了從請求時間起10年的有效期：
ExpiresDefault 「access plus 10 years」