EP15 - 前端常見的不同 caching 方法和應用

最近終於面試完了，雖然很可惜沒有拿到 offer 但面了兩間不同公司的 staff 和 principal engineer 職位的面試也讓我有些收穫也知道說自己哪些可以更好可以再去加強的，也跟我們組裡面的 staff 聊過說我可以做些什麼事情，或許以後會開一集講講 staff 以上的面試長什麼樣子吧。

上禮拜終於把我一個 300 個改動的 PR merge 了，是把一個專案的單元測試從 Jest 移到 Vitest，因為這樣那個 repo 的 unit test 在 CI 上面本來需要大約18分鐘才能跑完到現在的8分鐘，我之後會找時間寫一篇這個 migration journey，可以到時候看我英文版的練英文或是之後放在 twitter 上面的中文版。

在程式開發過程中，有些運算太複雜或是有些太重複的運算，我們會把運算結果 cache 下來用 memory 換取時間來優化整體效能，今天聊聊一個前端application哪邊可以做cache的動作來讓效能提升。

Memo

我前幾天有發一篇是 Tanstack 創作者寫的一篇關於 React memo 的事情，memo 全名叫 memoization，查了具體的定義大部分是說我們把一個function的結果先cache下來，等下一次有一樣的input進來時候我們直接回傳剛才cache下來的東西就行了而不用再跑一次同樣的計算，像是 React 的 memo function 就是根據如果一個 components 的 props values 沒變的話就跳過整個 render 的步驟而回傳剛剛已經弄好的 React Elements，不過這當然有利弊比如如果你不小心傳了一個新的 object 那這個 memo 就沒有用了而且從微觀角度看還會拖慢速度因為 React 需要做比較。Vue 3.2 也加入了 v-memo directive 和 React memo 的作用是差不多的但我不曉得底層實踐是不是一樣的，不過因為 Vue 的 reactive system 和 React 不一樣所以你不一定需要這個，老實說 React 可能也不需要只要 component 寫得好的話，不過這有點離題了。

照著這個定義走，這邊還有一些其他的例子：

• Nextjs 環境裡的 fetch 是他們自己改過的，當這個 request 已經發過了 Nextjs 會把 result cache 下來這樣等等有一樣的 request 時候就會回傳剛剛已經 cache 下來的 response，當然這個 behavior 是可以改的甚至關掉
• Apollo Server 寫 datasource 的時候，用他們自己的 method 來叫 API 也會做到類似剛才提到的 behavior，這樣也避免給 server 不必要的 loading
• React Query 和 Apollo Client 也會根據我們給的 parameter 加上自訂義的字串來建構一個 cache store，這樣如果你的 app 的 state 可以完全從 API 拿而不需要自己在前端弄一個只屬於前端的 state 那你同一個 request 再叫一次就好了，某方面來說這些 library 也可以變成 state management library

Local Storage

在前端我們有一些方法可以把資料長期存在瀏覽器裡面：比如 cookies、local storage、indexdb，其中又以 local storage 最多人使用因為最簡單而且不會污染到 cookies，這邊你可以存一些使用者設定或是其他 server 不需要知道但會影響使用者體驗的資料，除了這些也會拿來當作暫存資料和檔案的地方，比如你想要在一定時間內暫存一些 API 的 response 這樣之後不用再叫就可以利用 Local Storage 做這個事情，不過你得自己寫什麼時候 expire 或是什麼時候刪除才不會一直把資料留在那邊。Local Storage 也可以存圖片，這樣就不需要等發請求只要直接存 Local Storage 抓出來就好，配合 Service Worker的話你甚至可以弄一個可以離線使用的 application

Back Forward Cache

簡稱 bfcache，是一種瀏覽器會自動做的優化步驟，讓你點瀏覽器上的上一頁和下一頁時給你 instant navigation experience，有支援的瀏覽器會自動為每一頁存一個 snapshot 進 memory 這樣點上一頁時候瀏覽器會直接從 memory 把這一頁 render 出來給你那個即時的體驗，不過為了這個我們工程師也得做一些準備動作才能確保這個 bfcache 可以正常運作，比如不能用 unload event，你可能需要自動調整 cache 裡面的資料如果放太久可能已經 outdated 了，cache control 盡量不要用 no-store 因為瀏覽器拿到資料是不會存下來的，analytics tools 像是 GA 會看到 traffic 下降但其實沒有不過這有方法改的，你可以手動監聽一個 event 然後自己手動回傳資料。

Cache Control

我們 browser 從 server 接收到 response 時候，response header 裡面會有個東西叫 cache control，瀏覽器看到這個等於收到指令說我對這個 response 要怎麼做 cache 處理比如是看到不要留或是只存多久之類的，這邊列出幾個可能比較常用的

• max-age 這通常後面會帶一個數字告訴瀏覽器說 cache 這個 response 並且在接下來的時間裡可以重複使用這個 cache 知道時間過了為止
• no-cache: 瀏覽器可以把這個 response 存進 cache 裡但必須跟 server 先溝通過拿到資料後才可以把 cache 裡面資料拿出來用，確保你拿的資料永遠是新的
• must-revalidate: 通常會和 max-age 一起用，當 cache 變舊了或是在時間外了那瀏覽器必須和 server 重新拿資料
• no-store：瀏覽器不能把這個 response 存進 cache

CDN

Content Delivery Network 簡單來講就是各個地方有很多 server 然後但 client 去抓資料時候會從距離使用者最近的拿從物理上來說距離越近拿資料肯定越快，如果你的 JavaScript CSS 和其他 assets 都在 CDN 上面那你網站整體 loading 速度就會變得很快因為下載的快，假設運用得好比如 SSR render 出來的 HTML 也在 CDN cache 那下載任何頁面幾乎都是即時的了，所以通常都會建議使用 CDN

其他還有 Redis memcached 等等但對前端沒有直接關係就先不提了

下禮拜一是加拿大的感恩節所以下週會停更一下但還是會在 Twitter 和 Instagram 互動