快取&PWA 實踐

一、背景

從上一篇《前端動畫實現與原理分析》，我們從 Performance 進行動畫的效能分析，並根據 Performance 分析來優化動畫。但，前端不僅僅是實現流暢的動畫。ToB 專案會經常與資料的儲存、渲染打交道。例如開發中，為了提高使用者體驗，遇到了一些場景，其實就是在利用某些手段，來進行效能優化。

• Select 下拉：做前端分頁展示 → 避免一次性渲染資料造成瀏覽器的假死狀態；
• indexedDB：儲存資料 → 使用者下一次進入時，儲存上一次編輯的狀態 ……

那不免引發思考，我們從快取與資料儲存來思考，該如何優化？

二、 HTTP 快取

是什麼？

Http 快取其實就是瀏覽器儲存通過 HTTP 獲取的所有資源，
是瀏覽器將網路資源儲存在原生的一種行為。

請求的資源在哪裡？

1. 6.8kB + 200 狀態碼： 沒有命中快取，實際的請求，從伺服器上獲取資源；
2. memory cache: 資源快取在記憶體中,不會請求伺服器，一般已經載入過該資源且快取在記憶體中，當關閉頁面時，此資源就被記憶體釋放掉了；
3. disk cache: 資源快取在磁碟中，不會請求伺服器，但是該資源也不會隨著關閉頁面就釋放掉；
4. 304 狀態碼：請求伺服器，發現資源沒有被更改，返回 304 後，資源從本地取出；
5. service worker： 應用級別的儲存手段；

HTTP 快取分類

1. 強快取

1. 瀏覽器載入資源時，會先根據本地快取資源的 header 中的資訊判斷是否命中強快取。如果命中，則不會像伺服器傳送請求，而是直接從快取中讀取資源。
3. 強快取可以通過設定 HTTP Header 來實現：
   http1.0 → Expires: 響應頭包含日期/時間， 即在此時候之後，響應過期。
   http1.1 → Cache-Control:max-age=: 設定快取儲存的最大週期，超過這個時間快取被認為過期(單位秒)。與Expires相反，時間是相對於請求的時間