瀏覽器原理-瀏覽器緩存和本地存儲篇

你們好，我是林一一，這是一篇關於瀏覽器 緩存原理 和 本地存儲 的文章，後續回持續推出關於，瀏覽器原理的文章。

1、瀏覽器的緩存篇

思惟導圖

所謂瀏覽器的緩存，就是瀏覽器經過 HTTP 請求網絡資源後將資源留在本地的一種行爲。在頁面上點擊 返回和前進的按鈕 就是利用瀏覽器的緩存。

• 瀏覽器的緩存分爲兩種 強緩存 和 協商緩存。
• 瀏覽器緩存資源的位置放置四個地方 Service Worker, Memory Cache, Disk Cache, Push Cache。Service Worker 優先級最高到 Push Cache。

瀏覽器請求資源過程

先本地再服務器(先強緩存再協商緩存)

• 瀏覽器請求資源時會先去判斷本地緩存資源的 header 是否有命中強緩存，若是命中強緩存則直接請求本地的資源，不向服務器發送請求。

• 若是沒有命中強緩存或強緩存失效之後就會發送 HTTP請求服務器，這個過程採用的就是協商緩存

  簡單的說瀏覽器的緩存請求分爲有無 HTTP 請求兩種。

強緩存

所謂的強緩存是咱們沒有發送 HTTP 請求，而是直接從本地緩存中獲取資源的一種行爲。成功後返回狀態碼 200。

• 瀏覽器是根據響應頭的 headers 字段判斷 Expires/http1.0，Cache-Control/http1.1，來執行強緩存的過程。

• 沒有或失效的強緩存，瀏覽器會向服務器發送請求資源。

  Expires

  http1.0 中一個頁面的緩存字段，是一個格林時間。這個時間是瀏覽器強緩存資源失效的時間

  Expires: Wed, 22 Nov 2021 08:41:00 GMT

  上面的表示緩存的資源會在 2021年11月22號8點41分 過時。

• 缺點：瀏覽器是根據本地的時間判斷資源是否過時的，可是本地的時間能夠被修改，因此在HTTP1.1時 Expires 被放棄了。

Cache-Control

HTTP1.1 中頁面的緩存字段。 若是 Expires和Cache-Control 都存在，那麼 Cache-Control的優先級更高。

• Cache-Control 的屬性值有不少，其中屬性 max-age 表示，一個相對的緩存時間

  Cache-Control: max-age = 3600

  表示距離上次請求的一小時內能夠直接使用本地的緩存。不須要再次請求。

• 屬性 public 表示能夠被瀏覽器或代理服務器緩存。
• 屬性 private 表示只能被瀏覽器緩存。
• 屬性 no-cache 須要發送請求到服務器確認是否被緩存，這須要使用到協商緩存。
• 屬性 no-store 表示禁止使用緩存，每一次都須要請求服務器。

協商緩存

所謂協商緩存是指：瀏覽器攜帶 緩存的標識 tag向服務器發送請求，服務器更具攜帶過來的標識判斷是否使用緩存的這個過程就是 協商緩存。

• 瀏覽器請求服務器返回的結果有兩種，一種 304 表示服務器的資源尚未更新直接使用瀏覽器本地的緩存便可。另外一種返回 200，表示服務器資源更新且攜帶新的資源返回給瀏覽器。
• 緩存標識 tag 分紅兩種 Last-Modified/If-Modified-Since 和 ETag/If-None-Match，Etag / If-None-Match 的優先級高於 Last-Modified。

Etag / If-None-Match

• Etag 時服務器響應請求時 返回的一個惟一標識。這個標識只能由服務器產生。

  etag: W/"5357d2b3f63545926812b95658505315"

• If-None-Match 時瀏覽器再次請求服務器時，會攜帶 Etag 標識值發送給服務器，服務器會將這個值和在服務器中的Etag比較，兩個值相等那麼返回304，若是不相等就返回 200 將新的資源返回。

Last-Modified/If-Modified-Since

• Last-Modified，指的是返回請求的資源文件最後在服務器被修改的時間。

  Last-Modified: Wed, 23 Nov 2021 08:41:00 GMT

• If-Modified-Since，是瀏覽器再次請求資源時，會攜帶上一次返回的 Last-Modified 的時間發送給服務器。服務器將上一次最後修改的時間 和如今的最後修改的時間作對比。若是大於If-Modified-Since 的值，服務器就會返回新的資源 200，不然返回 304。

緩存位置

上面提到過緩存的位置 Service Worker, Memory Cache, Disk Cache, Push Cache。 Service Worker 優先級最高到 Push Cache

• Service Worker 運行在瀏覽器的獨立線程能夠實現瀏覽器的緩存功能，傳輸協議須要使用HTTPS。
• Memory Cache 是將資源緩存在內存中。
• Disk Cache 是將資源緩存在磁盤中
• Push Cache（推送緩存）是 HTTP/2 中，存活在會話session中，存活的時間很短。

2、瀏覽器的本地緩存篇

瀏覽器的本地緩存主要分爲 5 種， localStorage, sessionStorage, cookie, WebSql, indexedDB。

cookie

cookie 是服務器生成的，保存到瀏覽器的一個本地文件中。前端能夠經過 Set-Cookie 設置 cookie，前端能夠設置多個 Set-Cookie。

• cookie 能夠設置過時的時間也能夠不設置時間，瀏覽器關閉後就會失效。

  Set-Cookie: BDSVRTM=7; path=/
  Set-Cookie: H_PS_PSSID=34130_34099_33969_31253_33848_33607_26350; path=/; domain=.baidu.com

• cookie 產生緣由：是用來作 狀態存儲 的，由於 http 是無狀態的，不能記錄數據狀態，cookie 能夠記錄數據的狀態。好比用戶的id，密碼，瀏覽過的頁面等。
• cookie 的優勢：1. 記住數據的狀態，密碼等。2. 彌補的 HTTP 的無狀態。
• cookie 的缺點：1. 容量缺陷，只能存儲4kb大小；2.安全問題，cookie是以文本的形式在瀏覽器和服務器以前傳遞信息，頗有可能會被修改。3. 請求的Cookie文件容易被刪除。 4. 性能消耗大，cookie 是緊跟域名的，域名下的任意地址被修改都攜帶cookie到服務器。形成性能浪費。

localStorage

localStorage 存值的方式和 cookie 相似，都會存放在同一個域名下，localStorage 能夠長期存儲，沒有時間的限制。能夠經過 localStorage.setItem()/getItem() 存取值。

• localStorage 優勢：1.擴展了 cookie 的存儲大小，能夠存放 5M 大小，不一樣瀏覽器不一樣；2.只存儲在瀏覽器不會和服務器之間有通訊解決了cookie 的安全問題和性能消耗問題。
• localStorage 缺點：1.須要手動刪除保存的數據；2.只支持字符串類型，JSON 類型須要經過JSON.stringify() 轉化。
• localStorage 使用場景：利用 localStorage 能夠存放一些穩定的資源和base64的圖片等

sessionStorage

sessionStorage 和 localStorage 一致，惟一大的區別在於 sessionStorage 是會話級別的存儲

• 會話級別的 sessionStorage 也就是在瀏覽器頁面關閉後，這個存儲也就消失了。
• sessionStorage 的場景：sessionStorage 能夠用於保存一些臨時的數據，防止頁面消失後數據就沒了，好比表單填寫和用戶的瀏覽器記錄等。

indexedDB

瀏覽器提供的非關係型數據庫，indexedDB 提供大量的接口提供查詢功能，還能創建查詢。

• 以鍵值對的形式存儲值，包括 js 對象
• indexedDB 是異步的，存入數據不會致使頁面卡頓。
• indexedDB 支持事務，事務是一系列操做過程當中發生了錯誤，數據庫會回退到操做事務以前的狀態。
• 同源限制，不一樣源的數據庫不能訪問。
• 存儲空間沒有限制。

webSQL

已廢棄，旨在經過 js 語句操控 sql 語句完成對數據的讀寫。

參考

《圖解HTTP》

瀏覽器緩存

前端緩存

本地存儲