對於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角色。
這個就如同幾何分形學中的自相似性：從整體上看符合某種組成規律或者特性，同時，從局部看，仍然符合某種組成的規律或者特性。
