一文读懂浏览器存储与缓存机制
瀏覽器存儲
Cookie
Cookie 是 HTTP 協(xié)議的一種無狀態(tài)協(xié)議。當(dāng)請求服務(wù)器時，HTTP 請求都需要攜帶 Cookie，用來驗證用戶身份。Cookie 由服務(wù)端生成，存儲在客戶端，用來維持狀態(tài)。
通常 Cookie 由以下值構(gòu)成：
名稱（name）值（value）域（Domain）值（value）路徑（Path）失效時間（Expiers/Max-Age）大小（Size）是否為 HTTP 請求（HttpOnly）安全性（Secure）提示：域、路徑、失效時間和安全性都是服務(wù)器給瀏覽器的指示，它們不會隨著請求發(fā)送給服務(wù)器，發(fā)送給服務(wù)器的只有名稱與值對。Cookie 有一些限制，它可以設(shè)置有過期時間，但是如果沒有設(shè)置，則會和 session 一個級別，一旦關(guān)閉瀏覽器就會消失。
Cookie 擁有以下優(yōu)點：
-
可以控制過期時間，不會永久有效，有一定的安全保障。
-
可進(jìn)行擴展，可跨域共享。
-
通過加密與安全傳輸技術(shù) （SSL），可以減少 Cookie 被破解的可能性。
-
有較高的兼容性。
缺點則如下：
-
有一定的數(shù)量與長度限制，每個 Cookie 長度不能超過 4KB ，否則超出部分會被截掉。
-
請求頭上的數(shù)據(jù)容易被攔截攻擊。
-
單個 Cookie 大小不超過 4KB，很多瀏覽器都限制一個站點最多保存 20 個 Cookie。
web Storage
H5 可以在本地存儲用戶的瀏覽數(shù)據(jù)，以前用 Cookie，但是 web Storage 更快速、安全。可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站性能，以鍵/值對存在。
web Storage 分為兩種：sessionStorage 和 localStorage。
sessionStorage
sessionStorage 將數(shù)據(jù)存儲在 session 中，當(dāng)瀏覽器關(guān)閉就會消失。它具有以下特色：
- 大小 5Mb - 頁面刷新數(shù)據(jù)不會消失，頁面關(guān)閉就消失。 - 不可以跨頁面（僅在當(dāng)前頁面使用）。 - 使用 window.open 打開頁面和改變 location.href 方式可以獲取到 sessionStorage 內(nèi)部的數(shù)據(jù)。主要被應(yīng)用在下面這些場景中：
-
主要針對會話級的小數(shù)據(jù)的存儲。
-
存儲一些在當(dāng)前頁面刷新仍然需要存儲，但是關(guān)閉后不需要留下的信息。
-
很適合單頁應(yīng)用的使用，可以用來存儲登錄態(tài)信息等。
localStorage
localStorage 會把數(shù)據(jù)一直存在客戶端本地。其 API 提供了如下的方法進(jìn)行操作：
-
setItem (key，value) —— 保存數(shù)據(jù)，以鍵值對的方式存儲。
-
getItem (key) —— 讀取數(shù)據(jù)，傳入鍵值（key），獲得對應(yīng)的值（value）。
-
removeItem (key) —— 刪除某個數(shù)據(jù)，刪除鍵值對。
-
clear () —— 刪除所有數(shù)據(jù)。
-
key (index) —— 獲取某個索引的key。
下面是 localStora 的特性：
- 大小 5Mb。 - 可以跨頁面。 - 永久存儲，需要手動刪除。 - 使用 window.open 打開頁面和改變 location.href 方式可以獲取到 sessionStorage 內(nèi)部的數(shù)據(jù)。它通常都被運用在下列場景中：
-
持久性的保存客戶端數(shù)據(jù)，只能通過 JavaScript 刪除或者用戶清除瀏覽器緩存。
-
如果有一些稍大量的數(shù)據(jù)，例如編輯器的自動保存等。
-
多頁面間訪問共同數(shù)據(jù)。sessionStorage 只能用于一個標(biāo)簽頁，而localStorage可以在多個標(biāo)簽頁之間共享。
瀏覽器緩存機制
瀏覽器的緩存機制是將已訪問過的資源進(jìn)行緩存，這樣當(dāng)客戶端下次訪問時，就能直接訪問已經(jīng)緩存的資源，從而減少服務(wù)器請求次數(shù)，讓頁面能夠更快地加載。
而判斷是否訪問緩存則是依靠 HTTP 的各種 Header，比如下面的這幾種：
-
Expires：響應(yīng)頭，表示該資源的過期時間。
-
Cache-Control：請求頭/響應(yīng)頭，是緩存控制字段。
-
Etag (HTTP1.1)：響應(yīng)頭，是資源標(biāo)識，服務(wù)器存儲。一旦資源被修改，Etag 就會隨之發(fā)生變化。
-
lf-None-Match (HTTP1.1)：請求頭，一般服務(wù)器會將 If-None-Match 與被請求資源的最新 ETag 進(jìn)行比對。
-
Last-Modified (HTTP1.0)：響應(yīng)頭，表示資源最后一次修改的時間。
-
If-Modified-Since (HTTP1.0)：請求頭，資源最后一次修改時間(后面詳情）。
這些 Header 共同組成了 HTTP 的請求和響應(yīng)，也支撐著瀏覽器緩存，但是這種緩存方式是有缺陷的。
首先，如果資源更新的速度是秒以下單位，那么這個緩存是不能被使用的。因為它的時間單位最低是秒。
其次，如果文件是通過服務(wù)器動態(tài)生成的，那么該方法的更新時間永遠(yuǎn)是生成的時間。哪怕文件可能沒有變化，它也會自動更新，所以起不到緩存的作用。
強緩存
通常服務(wù)器會通知瀏覽器一個緩存時間，這個信息在 Cache-Control 和 Expires 中，瀏覽器通過這個判斷是緩存否過期。如果時間未過期。則直接從緩存中取。這就是所謂的“強緩存”。
Expires
在 HTTP1.0 中。使用 Expires 字段來表示緩存的到期時間，即有效時間+當(dāng)時服務(wù)器的時間。但是這種方式的缺陷是，用戶只需要修改客戶端本地時間，讓客戶端和服務(wù)器時間不一致時，瀏覽器就會判斷緩存失效，然后重新請求資源。
Cache-control
Cache-Control 是一個 HTTP 協(xié)議中關(guān)于緩存的響應(yīng)頭，它可以由以下值組成：
-
max-age：用于設(shè)置緩存的最大周期。與 Expires 相反，它的時間是相對于請求的時間。
-
s-maxage：和 max-age 相同，僅用于共享緩存，如 CDN 緩存。
-
public：相應(yīng)可以被任何對象緩存，即使是通常不可緩存的內(nèi)容。
-
private：緩存只能被單個用戶緩存，不能作為共享緩存（即代理服務(wù)器不可緩存）。
-
no-cache：可以緩存在客戶端，但每次都必須去服務(wù)器檢查新鮮度，來決定從服務(wù)器獲取最新資源（200）還是讀取緩存（304），即協(xié)商緩存。
-
no-store：不允許在客戶端存儲，每次都要從服務(wù)器請求新的資源。
協(xié)商緩存
如果未命中強緩存，即強緩存失效（可能是 Cache-Control 設(shè)置了 no-store 或 no-cache），則判斷協(xié)商緩存。
Last-Modified & If-Modified-Since(HTTP1.0)
當(dāng)?shù)谝淮握埱筚Y源后，服務(wù)器會返回改資源最后一次修改的時間。之后再次請求時，服務(wù)器會對比 If-Modified-Since 和 Last-Modified 字段。如果兩者相同，則表示資源未修改，返回 304 狀態(tài)碼。如果兩者不同，則表示資源已經(jīng)修改了，所以返回數(shù)據(jù)和 200 狀態(tài)碼（沒有發(fā)送請求）。
但是如果服務(wù)器更新資源的時間單位為秒，而上面提到的方法是無法識別一秒內(nèi)進(jìn)行多次修改的情況的。同時如果資源更新的速度不到 1ms，也是無法生成新的最后修改時間的。為了避免這種情況，在 HTTP1.1 中出現(xiàn)了一組新的字段：Etag 和 If-None-Match。
Etag & If-None-Match (HTTP1.1)
Etag 是 HTTP1.1 的屬性。它由服務(wù)器生成并返回給客戶端，優(yōu)先級高于 Last-Modified。
在 HTTP1.1 中，當(dāng)瀏覽器第一次發(fā)起 HTTP 請求時，服務(wù)器回返回一個 Etag。瀏覽器第二次發(fā)起同一個請求時，客戶端會發(fā)送一個 If-None-Match，它的值就是 Etag。服務(wù)器會比較瀏覽器發(fā)送過來的 Etag 和服務(wù)器的 Etag，如果相同就將 If-None-Match 的值設(shè)置為 false，并返回304，表示使用瀏覽器緩存。如果不同，服務(wù)器就將 If-None-Match 的值設(shè)置為 true，返回 200 和新的數(shù)據(jù)。
網(wǎng)頁加載速度的加快絕不僅僅是網(wǎng)速加快就能完成的，在我們流暢訪問的背后，瀏覽器存儲和緩存機制也功不可沒，希望本文能夠幫助大家增加對這個機制的了解。
參考資料：
深入理解瀏覽器的緩存機制 https://www.jianshu.com/p/54cc04190252
一文讀懂前端緩存 https://juejin.cn/post/6844903747357769742?utm_source=gold_browser_extension
瀏覽器的存儲與緩存機制 https://blog.csdn.net/wantingtr/article/details/100559520
總結(jié)
以上是生活随笔為你收集整理的一文读懂浏览器存储与缓存机制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TypeScript 枚举指南
- 下一篇： Python Type Hints 从入