Cache 是什麼？

想像一下，你在 Facebook 的網站裡（也許你都用 Instagram，那你想像任何一個喜歡的網站），接著 3 秒後按下重新整理（F5），這時候其實網站中大部分的內容都沒有更新，但是瀏覽器還是得重新從網站的伺服器下載所有的資料，如果該網頁一個月後才會更新，那這一個月內你每次點開或重新整理這個網站都下載了重複的資料，對身為用戶的你來說，花了許多的流量，卻得到一樣的東西，而且每次的重新下載，更花費你不少的等候時間；對遠方的網站伺服器來說，它也一直在忙於處理每個用戶的每次請求，一樣的事，卻重複在做，對於懶惰成性的工程師來說，是很難放著不管不理會它的，於是，Cache 就是為了這種情況下造成的資源耗損而誕生的。

Cache，又稱為快取（或緩存）， Cache 的概念是透過把常用的資源先存在你使用的地方，它就像是一份複本（copy），讓你不用一直回去網站主機重新去讀取這個檔案，因此加速讀取速度並減少流量，等有更新的時候再去網站主機端存取更新的檔案即可。對瀏覽器的使用者來說， Cache 節省了用戶的網路流量以及等候時間，用戶會發現，當第一次進入一個網站時通常會比較慢，但之後速度會快很多，這是因為瀏覽器在第一次時會將此網站的資料，例如：網頁及圖檔，js檔案，數據等下載到電腦硬碟中，之後當瀏覽器看到同一個 URL 的檔案名稱時，會先在本地 Cache 中尋找，如果有的話就直接讀取，沒有或是快取過期時，瀏覽器才會再向網路的伺服器真正送出請求。

就像，小明在學校每次要請假時，都需要到班導師的辦公室去拿空白的假條，可是班導很忙而且他的辦公室在隔壁棟好遠喔，想要下課去打籃球，不想浪費時間的小明於是走到隔壁的福利社去影印假條，只要確定格式沒換，他就可以一直用影印來的假條，當內容有更新時再去找班導拿就好。

這裡講的快取指的是瀏覽器（HTTP）的快取，但還有像是代理伺服器快取、閘道器快取、CDN 快取、反向代理伺服器快取、負載平衡器快取。

使用 HTTP Cache 的優點：

減少流量消耗
若每次連上網站都下載的檔案，對網站營運者以及用戶來說都是需要消耗流量，給提供網路寬帶的電信商收費的理由。使用儲存在本地端的 Cache，可以減少網路流量，降低營運成本。
降低伺服器的負荷
當設定資源的有效期限後，用戶在這段期間內可重複存取在本地的 Cache，減少對網站伺服器的請求，讓網站伺服器不用處理每個從客戶端發出的請求，減輕機器運作的負擔。
减少客戶端等待時間，加快頁面讀取速度
對用户來說，由於使用的 Cache 更接近請求端，資源傳送的時間更少，明顯加快網頁開啟的速度，提升使用者體驗。

HTTP Cache 的 Header

Cache-Control 是一個 HTTP/1.1 後引入的 Header，其中有多個屬性可以設定。

到底要不要使用快取，以及快取的使用方式：

no-store: 指不要使用也不儲存任何快取，每個請求都是送到原始的伺服器去取得資源
no-cache: 每一次造訪頁面都發送 Request 去確認，有新檔案的話就下載更新，沒有時就存取快取裡的資料

快取資源公開還是私有

private: 此快取是私有的，只有用戶端 (瀏覽器) 可以儲存本地的快取。常用在敏感的個人資料。
public: 此快取為公有共享的，資料傳輸過程中的 ISP, proxy 及 cdn 服務商都可以儲存，多用於公用的靜態檔案，例如 js, css 及圖片等。

新鮮度：

max-age
- 單位是秒(second)，意思是 ? 秒後才會過期，例如 max-age= 2592000，意指這個資源使用本地快取，有效期限是 30 天（60 x 60 x 24 x 30 = 2592000）。

檔案內容更動與否

除了設定快取有效時間，也能採用「檔案內容更動與否」的 Etag 來作為是否更新快取的條件。

把 Etag 想成是這份檔案內容的 hash 值，概念是當檔案內容相同時，檔案經過 hash 之後的值也一定會相同，在伺服器回應的 Header 帶上這個檔案的 Etag，客戶端保留該 Etag，等快取過期之後，瀏覽器發送If-None-Match 詢問 Server 是否有新的資料，此時伺服器比對客戶端傳來的 Etag 是否與自己伺服器的 Etag 一致，Etag 不一致表示資料有做過更動，就回傳新的資料；若 Etag 一致，那就回傳 304，表示檔案未更動，可直接繼續使用。

圖片來源