Cache緩存機制

論，如何定義一個前端工程師。前天看了篇文章，做者把前端攻城獅稱做是全部攻城獅角色中最具備也最須要‘工匠精神’的攻城獅。從最直觀的角度來說就是視覺方面，不只要百分百還原設計稿（靜態以及動態交互），還要考慮代碼是否工整、冗餘、複用、性能等方面問題，並且說得更博大一些還要培養點產品和設計的思惟（培養個P啊，這是開發和他們的鴻溝，純屬扯淡。）正兒八經的對於前端不僅是會JavaScript就好了，要學的東西真是太多了，做爲一名初生牛犢的我，仍是至關有必要擴展下一個web開發要掌握的知識面，好比今天要總結的緩存機制。

1、緩存的概念：

Web緩存是指一個Web資源（如html頁面，圖片，js等）存在於Web服務器和客戶端（瀏覽器）之間的副本。緩存會根據進來的請求保存輸出內容的副本；當下一個請求來到的時候，若是是相同的URL，緩存會根據緩存機制決定是直接使用副本響應訪問請求，仍是向源服務器再次發送請求。比較常見的就是瀏覽器會緩存訪問過網站的網頁，當再次訪問這個URL地址的時候，若是網頁沒有更新，就不會再次下載網頁，而是直接使用本地緩存的網頁。只有當網站明確標識資源已經更新，瀏覽器纔會再次下載網頁。

2、緩存的做用（簡述）：

• 減小網絡帶寬消耗
  不管對於網站運營者或者用戶，帶寬都表明着金錢，過多的帶寬消耗，只會便宜了網絡運營商。當Web緩存副本被使用時，只會產生極小的網絡流量，能夠有效的下降運營成本。
• 下降服務器壓力
  給網絡資源設定有效期以後，用戶能夠重複使用本地的緩存，減小對源服務器的請求，間接下降服務器的壓力。同時，搜索引擎的爬蟲機器人也能根據過時機制下降爬取的頻率，也能有效下降服務器的壓力。
• 減小網絡延遲，提高頁面渲染速度
  帶寬對於我的網站運營者來講是十分重要，緩存的使用可以明顯加快頁面打開速度，達到更好的體驗。

3、緩存的類型（手打星號）：

• 數據庫數據緩存：爲了提供查詢數據庫表的性能，通常會將查詢後的數據放到內存中進行緩存，以便下次使用時直接從內存返回，提升響應效率
• 服務器端緩存：a.代理服務器緩存-瀏覽器端和源服務器之間的一箇中間服務器，共享緩存，同一個副本會被重用屢次，爲大多用戶提供服務；b. CDN緩存（Content Delivery Network, 顧名思義，內容分發網絡），CDN和CDN緩存是兩個概念，切勿混淆，本篇文章談緩存。舉個例子，若是你要更新CDN上的資源，而後你把資源直接放到了CDN替換上邊的舊資源，文件名未修改（路經以及代碼未改），這時就頗有可能形成頁面讀取舊緩存的狀況出現，而這時假若出如今線上......[淚奔-.-!!]，so ! 切記替換CDN資源時加個時間戳或是設置好請求報頭裏的參數，避免飛來橫鍋。
• 瀏覽器緩存：這個就是常見在瀏覽器端的緩存，經常使用清除方法：控制檯-Application-Clear storage-選中Cache-Clear site data，Ctrl+F5（強制刷新），鼠標按住頁面刷新按鈕不放或按住滑動，會出現刷新選項（截不了圖sad）選項包括：正常從新加載 Ctrl + R || 硬性從新加載 Ctrl + shift + R || 清空緩存並硬性從新加載 ，不過我發現並非全部的網站均可以，緣由多是部分站點設置的緩存不一樣（有待研究）。
• web應用層緩存：這種緩存指的是代碼層面上，經過代碼邏輯和緩存策略實現對數據、頁面、圖片等資源的緩存。

4、生成緩存

本文要介紹的是瀏覽器緩存，其實就是指服務器和客戶端（瀏覽器）之間的一個副本（static sources like html/css/js）。一個完整的網絡請求大概是這樣的；
第一次請求： 客戶端發送請求 -> 本地無緩存 -> 向服務器發送請求 -> 返回靜態資源 -> 呈現（並緩存到本地）

第二次請求：以下圖一所示：

這裏要先說下緩存中相關的消息報頭參數，具體如圖二（標紅處重點理解 ）：

如今講圖一中發生的第二次請求，這次請求會讀取本地的緩存副本，但首先讀取的時候瀏覽器會判斷緩存的過時時間（假如設置的話），假若沒有過時就會讀取緩存。假若過時就會和服務器校對ETag（Entity tag用於緩存驗證）若是ETag非空，瀏覽器就會把ETag的值給If-None-Match進行對比，同時，也會對比Last-Modified和If-Modified-Since的值，若是相同則證實服務器沒有修改內容，就會返回304 Not-Modified讀取本地緩存，HTTP304狀態碼是指該本地緩存資源與服務端資源相比沒有被修改過因此會直接讀取本地緩存內容，反之從新向服務器發出請求並返回。此時Last-Modified和ETag的值都會被重置。

以上所述都是本身總結的一些知識，若有錯誤還請指正，感謝。

• 感謝如下前輩的解惑，向大佬看齊【敬禮！】
• http://www.alloyteam.com/2012...
• https://segmentfault.com/a/11...