記一次失敗的 bilibili 面試總結_緩存問題

傳送門

• 面試總結(1)：HTML佈局、CSS選擇器及JS基礎綜合能力知識點
• 算法基礎：數組flat、去重及排序
• React Vue 理解及基礎知識
• 跨域問題解決方案
• http協議狀態碼
• 緩存及更新問題
• webview與原生應用交互
• 服務器端知識

推薦一篇我以爲寫得很是不錯的關於理解瀏覽器緩存機制的文章, 裏面還有關於緩存應用場景的分析, 我就不寫不少廢話去誤導你們了哈.

深刻理解瀏覽器的緩存機制 ---- 浪裏行舟

貼連接的行爲若是涉及侵權請指出.

下面是我本身的整理出來的一些核心速覽內容:

1. 從儲存位置看緩存

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

Service Worker 的緩存與瀏覽器其餘內建的緩存機制不一樣，它可讓咱們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，而且緩存是持續性的。

PWA和實現也和這個有關哦. Memory Cache 與 Disk Cache 前者讀取速度快, 後者勝在容量.

Push Cache（推送緩存）是 HTTP/2 中的內容，當以上三種緩存都沒有命中時，它纔會被使用。它只在會話（Session）中存在，一旦會話結束就被釋放，而且緩存時間也很短暫，在Chrome瀏覽器中只有5分鐘左右

2. 從緩存過程看緩存

• 強緩存
• 協商緩存

某個請求若是以前的 response.headers 中有設置Expires(http 1.0)或者Cache-Control(http 1.1)內容, 就可能觸發緩存, 在資源過時以前, 就會命中緩存.

若是緩存過時了, 就會觸發協商緩存, 此時就會發送http請求服務器, 詢問關於資源的更新狀況, 瀏覽器會帶上以前發送請求收到的 Last-Modified 這個header，將其添加爲 If-Modified-Since 的值. 或者將ETag 的值賦值給 If-None-Match 這個header. 二者的區別就是前者是http 1.0的產物, 基於時間驗證, 可是有不少隱藏的問題會致使緩存更新有bug, 因此用 http 1.1 出了新規則去解決這個問題, ETag 是當前資源文件的一個惟一標識(由服務器生成)，只要資源有變化，Etag 就會從新生成.

若是上述比較表示緩存依舊有效, 會返回304, 並命中緩存. 不然返回200, 並更新緩存.