一文讀懂瀏覽器存儲與緩存機制

瀏覽器存儲

Cookie

Cookie 是 HTTP 協議的一種無狀態協議。當請求服務器時，HTTP 請求都需要攜帶 Cookie，用來驗證用戶身份。Cookie 由服務端生成，存儲在客戶端，用來維持狀態。

通常 Cookie 由以下值構成：

 名稱（name）
 值（value）
 域（Domain）
 值（value）
 路徑（Path）
 失效時間（Expiers/Max-Age）
 大小（Size）
 是否為 HTTP 請求（HttpOnly）
 安全性（Secure）

 提示：域、路徑、失效時間和安全性都是服務器給瀏覽器的指示，它們不會隨着請求發送給服務器，發送給服務器的只有名稱與值對。

Cookie 有一些限制，它可以設置有過期時間，但是如果沒有設置，則會和 session 一個級別，一旦關閉瀏覽器就會消失。

Cookie 擁有以下優點：

• 可以控制過期時間，不會永久有效，有一定的安全保障。

• 可進行擴展，可跨域共享。

• 通過加密與安全傳輸技術 （SSL），可以減少 Cookie 被破解的可能性。

• 有較高的兼容性。

缺點則如下：

• 有一定的數量與長度限制，每個 Cookie 長度不能超過 4KB ，否則超出部分會被截掉。

• 請求頭上的數據容易被攔截攻擊。

• 單個 Cookie 大小不超過 4KB，很多瀏覽器都限制一個站點最多保存 20 個 Cookie。

web Storage

H5 可以在本地存儲用戶的瀏覽數據，以前用 Cookie，但是 web Storage 更快速、安全。可以存儲大量的數據，而不影響網站性能，以鍵/值對存在。

web Storage 分為兩種：sessionStorage 和 localStorage。

sessionStorage

sessionStorage 將數據存儲在 session 中，當瀏覽器關閉就會消失。它具有以下特色：

- 大小 5Mb
- 頁面刷新數據不會消失，頁面關閉就消失。
- 不可以跨頁面（僅在當前頁面使用）。
- 使用 window.open 打開頁面和改變 location.href 方式可以獲取到 sessionStorage 內部的數據。

主要被應用在下面這些場景中：

• 主要針對會話級的小數據的存儲。

• 存儲一些在當前頁面刷新仍然需要存儲，但是關閉后不需要留下的信息。

• 很適合單頁應用的使用，可以用來存儲登錄態信息等。

localStorage

localStorage 會把數據一直存在客戶端本地。其 API 提供了如下的方法進行操作：

• setItem (key，value) —— 保存數據，以鍵值對的方式存儲。

• getItem (key) —— 讀取數據，傳入鍵值（key），獲得對應的值（value）。

• removeItem (key) —— 刪除某個數據，刪除鍵值對。

• clear () —— 刪除所有數據。

• key (index) —— 獲取某個索引的key。

下面是 localStora 的特性：

- 大小 5Mb。
- 可以跨頁面。
- 永久存儲，需要手動刪除。
- 使用 window.open 打開頁面和改變 location.href 方式可以獲取到 sessionStorage 內部的數據。

它通常都被運用在下列場景中：

• 持久性的保存客戶端數據，只能通過 JavaScript 刪除或者用戶清除瀏覽器緩存。

• 如果有一些稍大量的數據，例如編輯器的自動保存等。

• 多頁面間訪問共同數據。sessionStorage 只能用於一個標簽頁，而localStorage可以在多個標簽頁之間共享。

瀏覽器緩存機制

瀏覽器的緩存機制是將已訪問過的資源進行緩存，這樣當客戶端下次訪問時，就能直接訪問已經緩存的資源，從而減少服務器請求次數，讓頁面能夠更快地加載。

而判斷是否訪問緩存則是依靠 HTTP 的各種 Header，比如下面的這幾種：

• Expires：響應頭，表示該資源的過期時間。

• Cache-Control：請求頭/響應頭，是緩存控制字段。

• Etag (HTTP1.1)：響應頭，是資源標識，服務器存儲。一旦資源被修改，Etag 就會隨之發生變化。

• lf-None-Match (HTTP1.1)：請求頭，一般服務器會將 If-None-Match 與被請求資源的最新 ETag 進行比對。

• Last-Modified (HTTP1.0)：響應頭，表示資源最后一次修改的時間。

• If-Modified-Since (HTTP1.0)：請求頭，資源最后一次修改時間(后面詳情）。

這些 Header 共同組成了 HTTP 的請求和響應，也支撐着瀏覽器緩存，但是這種緩存方式是有缺陷的。

首先，如果資源更新的速度是秒以下單位，那么這個緩存是不能被使用的。因為它的時間單位最低是秒。

其次，如果文件是通過服務器動態生成的，那么該方法的更新時間永遠是生成的時間。哪怕文件可能沒有變化，它也會自動更新，所以起不到緩存的作用。

強緩存

通常服務器會通知瀏覽器一個緩存時間，這個信息在 Cache-Control 和 Expires 中，瀏覽器通過這個判斷是緩存否過期。如果時間未過期。則直接從緩存中取。這就是所謂的“強緩存”。

Expires

在 HTTP1.0 中。使用 Expires 字段來表示緩存的到期時間，即有效時間+當時服務器的時間。但是這種方式的缺陷是，用戶只需要修改客戶端本地時間，讓客戶端和服務器時間不一致時，瀏覽器就會判斷緩存失效，然后重新請求資源。

Cache-control

Cache-Control 是一個 HTTP 協議中關於緩存的響應頭，它可以由以下值組成：

• max-age：用於設置緩存的最大周期。與 Expires 相反，它的時間是相對於請求的時間。

• s-maxage：和 max-age 相同，僅用於共享緩存，如 CDN 緩存。

• public：相應可以被任何對象緩存，即使是通常不可緩存的內容。

• private：緩存只能被單個用戶緩存，不能作為共享緩存（即代理服務器不可緩存）。

• no-cache：可以緩存在客戶端，但每次都必須去服務器檢查新鮮度，來決定從服務器獲取最新資源（200）還是讀取緩存（304），即協商緩存。

• no-store：不允許在客戶端存儲，每次都要從服務器請求新的資源。

協商緩存

如果未命中強緩存，即強緩存失效（可能是 Cache-Control 設置了 no-store 或 no-cache），則判斷協商緩存。

Last-Modified & If-Modified-Since(HTTP1.0)

當第一次請求資源后，服務器會返回改資源最后一次修改的時間。之后再次請求時，服務器會對比 If-Modified-Since 和 Last-Modified 字段。如果兩者相同，則表示資源未修改，返回 304 狀態碼。如果兩者不同，則表示資源已經修改了，所以返回數據和 200 狀態碼（沒有發送請求）。

但是如果服務器更新資源的時間單位為秒，而上面提到的方法是無法識別一秒內進行多次修改的情況的。同時如果資源更新的速度不到 1ms，也是無法生成新的最后修改時間的。為了避免這種情況，在 HTTP1.1 中出現了一組新的字段：Etag 和 If-None-Match。

Etag & If-None-Match (HTTP1.1)

Etag 是 HTTP1.1 的屬性。它由服務器生成並返回給客戶端，優先級高於 Last-Modified。

在 HTTP1.1 中，當瀏覽器第一次發起 HTTP 請求時，服務器回返回一個 Etag。瀏覽器第二次發起同一個請求時，客戶端會發送一個 If-None-Match，它的值就是 Etag。服務器會比較瀏覽器發送過來的 Etag 和服務器的 Etag，如果相同就將 If-None-Match 的值設置為 false，並返回304，表示使用瀏覽器緩存。如果不同，服務器就將 If-None-Match 的值設置為 true，返回 200 和新的數據。

網頁加載速度的加快絕不僅僅是網速加快就能完成的，在我們流暢訪問的背后，瀏覽器存儲和緩存機制也功不可沒，希望本文能夠幫助大家增加對這個機制的了解。

參考資料：

深入理解瀏覽器的緩存機制 https://www.jianshu.com/p/54cc04190252

一文讀懂前端緩存 https://juejin.cn/post/6844903747357769742?utm_source=gold_browser_extension

瀏覽器的存儲與緩存機制 https://blog.csdn.net/wantingtr/article/details/100559520

推薦閱讀

上網時遇到的 404 是什么意思

全站 HTTPS 就一定安全了嗎？