前端緩存機制詳情 - 前端,緩存,http緩存,瀏覽器緩存叻妮博客

什麼是緩存？

緩存可以認為是資源的副本。它與本地緩存localStorage等不一樣，本地緩存更多的是數據記錄，數據量小；而緩存是為了減少請求，多用於文件，存儲量大。
前端緩存主要可以分為http緩存和瀏覽器緩存。

這裏先解釋一下後面會出現的詞

命中緩存：訪問的數據在緩存中

http緩存

什麼是http緩存

http緩存其實就是：當客户端向服務器端發送請求的時候，會先訪問瀏覽器緩存，如果瀏覽器緩存中有請求的資源，那就不向服務器發送請求，而使用緩存的資源。

這裏涉及到了瀏覽器加載一個頁面的流程，簡單來説就是：

瀏覽器判斷http請求頭中的信息，看是否命中強緩存，如果命中就去緩存裏找，而不向服務器端發送請求；
如果強緩存命中失敗，則會進行協商緩存，也就是瀏覽器會發送請求到服務器端，服務器會判斷瀏覽器本地緩存是否失效。如果未失效，則服務器會返回304，瀏覽器繼續加載緩存的資源；
如果未命中協商緩存，則服務器會返回完整的請求資源信息給瀏覽器，瀏覽器加載新資源，並且更新緩存。

http緩存可以分為強緩存和協商緩存：

什麼是強緩存？

強緩存是利用http請求頭的Cache-Control和expires兩個字段控制的，表示資源過期的時間。
命中強緩存時，瀏覽器是不會向服務端發送請求的。然後返回的狀態碼是200，這種速度很快，性能也很好。但是有些時候我們可能改了一些樣式，刷新發現頁面一點變化都沒有，就是因為強緩存導致的，這時我們可以按Ctrl+F5進行強制刷新。

Cache-Control

緩存的相對時間，比如説Cache-Control:3600,就是指改資源被緩存的時間為3600秒，過後就失效了。

Expires

指緩存的過期時間，一旦超過這個時間點，緩存就失效了。

當這兩者同時存在的時候，Cache-Control的優先級要高些。

（Pragma是http1.0存在的，在http1.1中被廢棄了，如果三者同時存在，Pragma的優先級是最高的）

什麼是協商緩存？

瀏覽器發送請求給服務器，服務器會根據http請求頭的Last-Modify/If-Modify-Since或Etag/If-None-Match判斷對比資源是否更新了，這可以當作是瀏覽器和服務器的協商過程，如果服務器的資源較上次沒有修改，http狀態碼返回304，瀏覽器從緩存中加載資源。如果修改了，則返回狀態碼200，並且將更新後的資源以及緩存信息一起返回。

Last-Modify/If-Modify-Since

Last-modify/If-Modify-Since是一個時間標識該資源的最後修改時間，是檢查服務器端資源是否更新的一種方式。

Etag/If-None-Match

Etag/If-None-Match返回的是一個校驗碼（ETag: entity tag）。ETag可以保證每一個資源是唯一的，資源變化都會導致ETag變化*。ETag值的變更則説明資源狀態已經被修改。

執行流程是這樣子的：
當瀏覽器第一次向服務器發送http請求時，會在響應頭返回Last-Modify和ETag；然後瀏覽器在第二次向服務器發送請求的時候會在請求頭帶上與ETag對應的If-None-Match，以及與Last-Modify對應的If-Modify-Since。服務器接收到請求之後，會對這兩個參數進行對比，如果返回狀態碼為304，則説明資源沒有被修改。

瀏覽器緩存

瀏覽器緩存包括了cookie,WebStorage(LocalStorage,SessionStorage)等。

cookie

cookies是保存在客户端的純文本信息，主要用於用户信息的存儲，容量為4KB。

用法

創建 cookie

document.cookie="username=John Doe";

給cookie添加過期時間

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

通過path參數告訴瀏覽器cookie的路徑

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

讀取cookie

var ck = document.cookie // 以文本方式返回所有cookie

localStorage

localStorage的數據一直保存在瀏覽器，直到用户手動清除瀏覽器緩存為止，容量為5MB。

用法

var localStorage = window.localStorage

存儲數據

localStorage.setItem("name","caibin") //存儲名字為name值為caibin的變量
localStorage.name = "caibin"; // 等價於上面的命令

讀取數據

localStorage.getItem("name") //caibin,讀取保存在localStorage對象里名為name的變量的值

localStorage.name // "caibin"

localStorage.valueOf() //讀取存儲在localStorage上的所有數據

localStorage.key(0) // 讀取第一條數據的變量名(鍵值)

//遍歷並輸出localStorage裏存儲的名字和值

for(var
i=0; i<localStorage.length;i++){

  console.log('localStorage裏存儲的第'+i+'條數據的名字為：'+localStorage.key(i)+',值為：'+localStorage.getItem(localStorage.key(i)));

}

刪除數據

localStorage.removeItem("name"); //undefined

清空localStorage

localStorage.clear()

sessionStorage

sessionStorage與localStorage屬性相同，不同的是在關閉當前頁面時，它就會被清除。

用法與localStorage一致

cookie，localStorage，sessionStorage的區別

叻妮博客

叻妮博客

博客 / 詳情