對於Web前端而言，cache可以說是無處不在，通常是2個環節之間，就會引入一個cache做為提升整體效率的角色。例如A和B兩者之間的資料交換，為了提升整體的效率，引入角色C，而C被用於當做熱點資料的儲存，或者是某種中間處理的機制。

也就是我們常常說的“空間換時間”，犧牲一部分代價，來換取整體效率的提升。

那麼我們一起來看看前端當中，有那些比較關鍵的快取？它們又是怎樣協調工作的呢？我們一起來看看哈。

1. 域名轉為IP地址（域名伺服器DNS快取）

我們知道url其實只是一個別名，真實的伺服器請求地址，實際上是一個IP地址。獲得IP地址的方式，就是查詢DNS對映表。雖然這是一個非常簡單的查詢，但如果每次使用者訪問一個url都去查詢DNS一次，未免顯得太頻繁。DNS會告訴你，你別老是經常過來，萬一我掛了，我們就無法愉快地玩耍了。

各個瀏覽器的快取時間，會有一定的差別。而在chrome瀏覽器中檢視dns的快取時間的方式：chrome://net-internals/#dns

因此，瀏覽器一般會在本地會建立一個DNS快取，在一段比較長的時間裡，都是使用本地的快取對映。例如，在win7系統的cmd裡，可以通過“ipconfig /flushdns ”的方式來重新整理本地DNS。

優點：url對映為IP非常快。

成本：消耗一定的瀏覽器空間來儲存對映關係

2. 訪問伺服器，獲取靜態內容（地理位置分散式服務CDN）

有同學可能會說，這個CDN不是快取。其實，CDN的原則就是將離你很遠的東西，放在離你很近的地方，通過這種方式提高使用者的訪問速度。從這個角度，它也可以理解為犧牲空間成本換取了時間，本質上也帶有cache的嫌疑，我們權且當做一種特殊的cache吧

優點：解決使用者離伺服器太遠的時候，網路路由中跳來跳去的嚴重耗時。

成本：全國各地部署多套靜態儲存服務，管理成本比較高，釋出新檔案的時候，需要等待全國節點的更新等。

3. 瀏覽器本地快取（無網路互動型別）

在雅虎前端優化的14條原則中，其中一條就是儘量消滅請求，以達到降低伺服器壓力和提升使用者體驗的效果。靜態檔案，例如Js、html、css、圖片等內容，很多內容可以1次請求，然後未來就直接訪問本地，不再請求web伺服器。

常用的實現方法是通過Http協議頭中的expire和max-age來控制，這兩者的使用方法和區別，我這裡就不贅敘了哈。還有一種最近HTML5中很火的，則是localStorage，尤其在移動端也被做為一個強大的快取，甚至當做一種本地儲存來廣泛使用

優點：減少網路傳輸，加快頁面內容展示速度，提升使用者體驗。

成本：佔用客戶端的部分記憶體和磁碟，影響實時性。

4. 瀏覽器和web服務協議快取（有網路互動型別）

瀏覽器的本地快取是存在過期時間的，一旦過期，就必須重新向伺服器請求。這個時候，會有兩種情形：

（1）伺服器的檔案或者內容沒有更新，可以繼續使用瀏覽器本地快取。

（2）伺服器的檔案或者內容已經更新，需要重新請求，通過網路傳輸新的檔案或者內容。

這裡的協商方式也可以通過Http協議來控制，Last-Modified和Etag，這個時候請求伺服器，如果是內容沒有發生變更的情況，伺服器會返回304 Not Modified。這樣的話，就不需要每次訪問伺服器都通過網路傳輸一個比較大的檔案或者資料包，只要簡單的http應答就可以達到相同的請求檔案效果。

優點：減少頻繁的網路大資料包傳輸，節約頻寬，提升使用者體驗。

成本：增加了的伺服器處理的步驟，消耗更多的CPU資源。

5. 瀏覽器中間代理

上面的幾種cache機制，實際上都是非常常見。但是，在移動網際網路時代，流量昂貴是很多使用者心中的深深的痛。於是，又出現了一種新型的中間chache，也就是在瀏覽器和web伺服器再架設一箇中間代理。這個代理伺服器會幫助手機瀏覽器去請求web頁面，然後將web頁面進行處理和壓縮（例如壓縮檔案和圖片），使頁面變小，然後再傳輸給手機端的瀏覽器。

部分手機瀏覽器（例如chrome），號稱可以節省流量，實際上就是上述做法。但是，也分為兩種情況：

（1）使用者的網路和手機配置都比較差，因為頁面被壓縮變小，載入和傳輸速度變快，並且節約了流量。

（2）使用者的網路和手機配置都比較好，本身直連速度已經很快了，反而因為設定了中間代理，載入速度變慢，也可節約流量。

優點：節約使用者流量，大部分情況下提升了載入速度。

成本：需要架設中間代理伺服器，對各種檔案進行壓縮，有比較高的伺服器維護成本。

6. 預載入快取機制

這種載入方式也是主要流行在移動端，為了解決手機網速慢和瀏覽器載入效能的問題，瀏覽器會判斷頁面的關聯內容，進行“預載入”。也就是說，在使用者瀏覽A頁面的時候，就下載並且載入B頁面的內容。給使用者的體驗就是，B頁面一瞬間就出現了，中間沒有任何延遲的感覺，從而帶來更好的極佳的使用者體驗。

這種實現機制，往往由瀏覽器來實現，當然，手機頁面本身，也可以通過JS來自身實現。而這種機制也存在一些問題，瀏覽器需要預判使用者的瀏覽行為，在一些場景下，這個預判演算法本身不一定準確，如果不準確則帶來一定的流量、記憶體和系統資源的浪費。、

優點：給使用者帶來極佳的頁面展示體驗。

缺點：預判實現比較複雜，佔據一定的記憶體和手機系統資源，可能產生流量和資源浪費。

前端的chache當然不僅僅如此簡單，如果細緻到每一個小環節和組成部分，我們會發現實際上是無處不在的，例如瀏覽器的渲染行為、網路網絡卡的傳輸環節，小環節和小環節之間也有無數這種型別的cache角色。

這個就如同幾何分形學中的自相似性：從整體上看符合某種組成規律或者特性，同時，從區域性看，仍然符合某種組成的規律或者特性。