Cache
由於最近在面試找工作，才發現雖然自己身為網頁應用程式開發者，卻還沒有好好瞭解過http cache的方式、機制等等。 趁著這次機會，讓自己好好瞭解認識一下 Http Cache相關原理、機制。
Image Source : Cache Control.
前言
身為一位網頁開發者，不論身處前端或者後端，知道如何讓整個網頁應用程式品質更高、使用者體驗更好絕對只有好處沒有壞處。
而現今的各瀏覽器即便不特別設定，也會為我們選擇它認為的最好快取策略。可對於開發者，我們很大概率會需要自己掌控、制定快取機制。來讓我們的網頁擁有更好的服務品質。
因此就讓我們就來認識看看Http Cache如何能夠幫助網頁提升效率，以及減少伺服器的負擔。
Client 和 Server 溝通簡易流程
Client(瀏覽器)向Server送出請求某個資源，Ex: abc.css
Server 回傳abc.css並且透過ETag，Expires等資訊告訴瀏覽器請他可以保存該資源在快取。
當再次需要索取abc.css時，瀏覽器會先跟快取確認，如果有就回傳給瀏覽器。
快取上沒有合適的檔案時，則將請求發送給Server。
以此達到減少網路傳輸量，減少使用者等待時間，減輕伺服器負擔以及提升使用者體驗。
決定header
在決定使用什麼快取策略時，可以參考下面的流程圖。幫助我們由大方向到小方向決定使用哪些header和directives(指令)。
Image Source : Guide for Caching and Http Cache Headers for Static Content.
與 http cache相關之headers
在開始說明headers前必須要先說明一些東西。首先，快取『過期』或者『超過時間不新鮮』，英文為 Stale。
再者，當快取為stale時，不代表失效、不能再被使用。此時會配合接下來提到的一些header資訊，如 ETag 、 Last-Modified...等， 幫助瀏覽器以及Server決定是否能夠繼續使用該快取或者重新發送一個。
Expires- 指定一個時間點，資源在此時間點後會被當作 stale。 注意
根據 Expires vs Max-Age 以及 Expires Headers for SEO，在使用此Header必須多考慮幾個面向，避免反而因此造成對網站的負面影響，如: 因為將
Expires時間設定為太長，導致某個資源在更新後，卻因而一直還在使用快取上的資源。但後來'將版本號加入Url'的方式能讓我們解決快取不常更新資源又同時能夠在更新時，立馬讓瀏覽器重新跟Server請求，因此在現在這個時間點似乎當時的問題也不再是問題。
- 指定一個時間點，資源在此時間點後會被當作 stale。
Cache-Control- 提供許多Directives(指令)，可作不同設定。
- Directives:
public、private
如快取被設定為private，則只能被單一使用者使用並且不能被共享快取(如: CDN )存取。
通常會存放與個人較相關之訊息。no-store
完全不快取該資源。no-cache
和名稱所感覺之意思不同。
實際上no-cache效果為讓瀏覽器每次使用資源之前，都必須跟Server驗證過後才能使用。
因此，可以使用must-revalidate來避免誤會且達到同樣效果。max-age
和Expires指定失效時間不同，max-age指定資源剩下多少時間會被當作 stale。提示max-age的層級較Expires高，因此同時存在時會以max-age設定為優先。
ETags- 為Strong-Validator, 使用
ETag驗證檔案可以完全確定資源是否一模一樣。 - 為用來確定快取雖然狀態為stale，但能否繼續使用之header。
- 伺服器會根據資源內容產生雜湊(Hash)值並放在Response Header裡。如:
當再次對同一資源發出請求時，會將該值放在Request Header裡的if-none-match一起送往Server。
Server因而可以判斷Client端快取資源的版本是否與現在Server上資源版本相同，如相同則回傳304 Not Modified。 如圖 :
Image Source : Etag Flow.- 為Strong-Validator, 使用
Last-Modified- 為Weak-Validator, 使用
Last-Modified驗證時如果內容不變，footer或者如廣告變動了還是會被當作一樣的資源。而Strong-Validator則會視為不一樣的資源。 - 為用來確定快取雖然狀態為stale，但能否繼續使用之header。
- 和
ETag不同在於，Last-Modified並非以檔案內容來判定，而是以'時間'判定檔案是否有變動，也因此使得其為Weak-Validator。 - 伺服器會將資源最後異動時間放在此Response Header中，接著當對同資源再出發出請求時，瀏覽器會在Request Header中加上
If-Modified-Since，來讓伺服器可以以此和目前系統上該資源比較。提示If-Modified-Since的限制為最小時間單位為秒。優先順為小於If-none-match
- 為Weak-Validator, 使用
結語
透過http cache提供的許多header，我們可以很好地達成各種需求所需的不同快取策略，提升網站的品質。想必從以前到現在強調使用者體驗的時代更是不可忽略的一塊。
快取的內容也遠不止如此，我想未來也會再找時間針對其他部分繼續深入學習！