記一次失敗的 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, 並更新快取.