前端三十｜23. [FE] 網頁的快取機制是怎麼運作的？

筆者在剛開始寫網頁時，總是會遇到改了檔案重新整理畫面卻沒更新，或是更新了一張圖檔到伺服器但網頁內容沒有更換等情況，使得現在按 Ctrl/CMD + R 時，小指都會自動同時按下 Shift 來忽略快取；相信不少人多少都有類似的經驗吧？但到底什麼是快取呢？

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

快取是什麼

想像一下，假設有個人叫做小明，他每天都會照三餐滑 Instagram 配飯吃，滑滑按按，可能一下子就看個好幾十張照片，就先算他個 50 張好了；又因為小明沒有朋友，所以很容易就滑到重複的內容了，可能看的 50 張裡有一半是看過的舊的照片。

小明在滑的過程中，其實就等同於不斷地向 Instagram 拿到下一則動態，但如果這則動態是小明先前看過的，如果又重複向伺服器拿取，一來一往之間就浪費了不少網路傳輸量；快取就是幫我們省下這個浪費，將你看過的東西留下來，在需要時便能直接拿出來用，不用再次向資料來源端請求。

在 幾天前 我們聊到了網站優化，文中提到了全世界網站內容的資源量不斷增加，現在（2019/09）網站的平均資源下載量已經到達 5M 之譜；但
如果使用者已經造訪過該網站，其實有不少資源都可以重複利用對吧？例如不會變動的靜態資料、頁面中的部分圖檔等等；這些資源，便可以透過一層層的快取機制，將內容留存住。

快取的分層

既然快取就是將內容留存留存一份，方便下次取用，那麼應該留在哪裡呢？

從網站使用的方向來思考吧。首先是使用者的電腦及瀏覽器，在送出請求前，會先確認是否有本地快取（也就是我們清除快取在清除的東西），如果沒有或是快取過期，瀏覽器才會真正送出請求。

除此之外，如同我們 先前 聊到的，透過 JavaScript 操作 Web Storage API，也是可以做為快取的儲存層；接下來，我們拿的資源如果被放在 CDN，那麼我們就會連到最近的 CDN 節點取得資源；這些 CDN…