緩存的種類

瀏覽器緩存

緩存存在的意義就是當用戶點擊back按鈕或是再次去訪問某個頁面的時候能夠更快的響應。尤其是在多頁應用的網站中，如果你在多個頁面使用了一張相同的圖片，那么緩存這張圖片就變得特別的有用。瀏覽器先向代理服務器發起Web請求，再將請求轉發到源服務器。其中瀏覽器緩存包括強緩存和協商緩存。

CDN緩存

CDN緩存一般是由網站管理員自己部署，為了讓他們的網站更容易擴展并獲得更好的性能。通常情況下，瀏覽器先向CDN網關發起Web請求，網關服務器后面對應著一臺或多臺負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。從瀏覽器角度來看，整個CDN就是一個源服務器，從這個層面來說瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。

代理服務器緩存

代理服務器是瀏覽器和源服務器之間的中間服務器，代理轉發響應時，緩存代理會預先將資源的副本（緩存）保存到代理服務器上。當代理再次接收到對相同資源的請求時，就可以不從源服務器那里獲取資源，而是將之前緩存的資源作為響應返回。

數據庫緩存

數據庫緩存是指，當web應用的關系比較復雜，數據庫中的表很多的時候，如果頻繁進行數據庫查詢，很容易導致數據庫不堪重荷。為了提供查詢的性能，將查詢后的數據放到內存中進行緩存，下次查詢時，直接從內存緩存直接返回，提供響應效率。

應用層緩存

應用層緩存是指我們在代碼層面上做的緩存。通過代碼邏輯，把曾經請求過的數據或資源等，緩存起來，再次需要數據時通過邏輯上的處理選擇可用的緩存的數據。

瀏覽器緩存機制

瀏覽器緩存機制，其實主要就是HTTP協議定義的緩存機制（如： Expires； Cache-control等）。但是也有非HTTP協議定義的緩存機制，如使用HTML Meta 標簽，Web開發者可以在HTML頁面的節點中加入標簽，代碼如下：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代碼的作用是告訴瀏覽器當前頁面不被緩存，每次訪問都需要去服務器拉取。使用上很簡單，但只有部分瀏覽器可以支持，而且所有緩存代理服務器都不支持，因為代理不解析HTML內容本身。

Expires策略

Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。

Web服務器告訴瀏覽器在2012-11-28 03:30:01這個時間點之前，可以使用緩存文件。發送請求的時間是2012-11-28 03:25:01，即緩存5分鐘。

不過Expires 是HTTP 1.0的東西，現在默認瀏覽器均默認使用HTTP 1.1，所以它的作用基本忽略。

Cache-control策略（重點關注）

Cache-Control與Expires的作用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據還是重新發請求到服務器取數據。只不過Cache-Control的選擇更多，設置更細致，如果同時設置的話，其優先級高于Expires。
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各個消息中的指令含義如下：

Public指示響應可被任何緩存區緩存。
Private指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對于其他用戶的請求無效。
no-cache指示請求或響應消息不能緩存
no-store用于防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存。
max-age指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應。
min-fresh指示客戶機可以接收響應時間小于當前時間加上指定時間的響應。
max-stale指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內的響應消息。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified：標示這個響應資源的最后修改時間。web服務器在響應請求時，告訴瀏覽器資源的最后修改時間。

If-Modified-Since：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Last-Modified聲明，則再次向web服務器請求時帶上頭If-Modified-Since，表示請求時間。web服務器收到請求后發現有頭If-Modified-Since
則與被請求資源的最后修改時間進行比對。若最后修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），HTTP 200；若最后修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所保存的cache。

Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。

Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識（生成規則由服務器覺得）。Apache中，ETag的值，默認是對文件的索引節（INode），大小（Size）和最后修改時間（MTime）進行Hash后得到的。

If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web服務器請求時帶上頭If-None-Match（Etag的值）。web服務器收到請求后發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。

既生Last-Modified何生Etag？

你可能會覺得使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題：

Last-Modified標注的最后修改只能精確到秒級，如果某些文件在1秒鐘以內，被修改多次的話，它將不能準確標注文件的修改時間

如果某些文件會被定期生成，當有時內容并沒有任何變化，但Last-Modified卻改變了，導致文件沒法使用緩存

有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形

Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符，能夠更加準確的控制緩存。Last-Modified與ETag是可以一起使用的，服務器會優先驗證ETag，一致的情況下，才會繼續比對Last-Modified，最后才決定是否返回304。

http請求過程中緩存的邏輯

用戶行為與緩存

瀏覽器緩存行為還有用戶的行為有關！！！

緩存位置

緩存的位置按照獲取資源請求優先級，緩存位置依次如下：

• Memory Cache(內存緩存)
• Service Worker(離線緩存)
• Disk Cache(磁盤緩存)
• Push Cache(推送緩存)

(1) Memory Cache

Memory 為內存緩存，是瀏覽器最先嘗試命中的緩存，也是響應最快的緩存。但是存活時間最短的，當進程結束后，tab 標簽關閉后，緩存就不存在了。
因為內存空間比較小，通常較小的資源放在內存緩存中，比如 base64 圖片等資源。

(2) Service Worker

Service Worker 是一種獨立于主線程之外的 Javascript 線程。它脫離于瀏覽器窗體，因此無法直接訪問 DOM。

可以幫我們實現離線緩存、消息推送和網絡代理等功能。

(3) Disk Cache

內存的優先性，導致大文件不能緩存到內存中，那么磁盤緩存則不同。雖然存儲效率比內存緩存慢，但是存儲容量和存儲市場有優勢。

(4) Push Cache

它是最后一道緩存命中，屬于 HTTP2 的內容

總結

以上是生活随笔為你收集整理的浏览器缓存及实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。