web面試常問http緩存解析相關

Posted on by

為什麼要有http緩存?

1.當輸入網址到加載出頁面, 電腦會經過”CPU計算、網絡請求、頁面渲染”等一系列步驟;

2.“網絡請求”是其中最不確定、最耗時的一個環節, 針對這個環節, 我們可以通過”減少網絡請求的體積和數量”, 來更快加載出頁面, 這是”緩存”存在的原因;

3.通過”緩存”可以實現”減少網絡請求的體積和數量”;

http緩存之 強制緩存

1.當第一次訪問某個網站, 該網站後端如果認為請求的資源(css、js、圖片等)應該被瀏覽器緩存下來

2.後端會在響應頭中添加一個配置:

Cache-Control: max-age=12146545(單位:秒)

3.當我們再次請求該網站時, 會直接從本地緩存讀取資源, 不會向服務器請求緩存的資源

4.如果緩存資源過期瞭, 會從服務端請求所有資源, 並再次緩存加瞭配置項的資源

5.Cache-Control 的設置, 由後端開發決定, 不涉及前端, 當然也可以設置成不緩存: Cache-Control: no-cache

在這裡插入圖片描述

http緩存之 協商緩存(對比緩存)

1.協商緩存是服務端的一種緩存策略;

2.當第一次訪問某個網站, 發送請求時, 服務器會返回資源和資源標識. 瀏覽器會把資源和資源標識都緩存下來;

3.當再次發送請求時, 會帶上資源標識, 服務器會把請求中的資源標識, 和服務器中的最新資源標識, 作對比:

  • 如果一致: 服務器隻返回304, 瀏覽器會在緩存中直接獲取資源(減少請求數據的體積);
  • 如果不一致: 服務器會返回200和 請求的資源 及 最新資源標識 (體積會相對大一些)

在這裡插入圖片描述

協商緩存中的資源標識

資源標識有兩種, 發送請求時, 都是放在請求頭中:

Last-Modified : 資源上一次修改的時間

If-Modified-Since: xxxxx (鍵名和Last-Modified不一樣)

在這裡插入圖片描述

ETag : 資源對象的唯一字符串

If-None-Match: xxxx(鍵名和Last-Modified不一樣)

在這裡插入圖片描述

優先級的問題

一般來說會優先使用 ETag , 因為 Last-Modified 的值隻精確到 秒級

文件如果每隔一段時間都重復生成，但內容相同。

 Last-Modified 會每次返回資源文件，即便內容相同。
但是Etag可以判斷出文件內容相同，就會返回304，使用緩存

在這裡插入圖片描述

以上就是web面試之http緩存解析的詳細內容，更多關於web面試http緩存的資料請關註WalkonNet其它相關文章！

推薦閱讀：