寫在前面：
前段時間公司同事分享了前端快取有關的知識，作為乙個還沒畢業的實習生，聽得我一頭霧水，遂在閒暇之際，自己捋一捋。
快取是效能優化中非常重要的一環，快取的意義就在於減少請求，更多地使用本地的資源，給使用者更好的體驗的同時，也減輕伺服器壓力。接下裡從三個部分來說明一下前端的快取。
1.強快取
2.協商快取
3.快取位置 我們在請求資源的時候，首先檢查強快取，如果命中強快取，那麼http請求都不需要傳送了，直接使用快取。少了一次請求（dns解析，三次握手啥的都不需要了）
值得注意的是，強快取在http/1.0和http/1.1中，用來判斷的字段是不一樣的。在http/1.0中使用的是expires，而http/1.1中使用的是cache-control。
expires
從字面理解，expires即過期時間，存在於伺服器返回的響應頭中，告訴瀏覽器在這個時間之前可以從快取中獲取資料，不需要發起http請求，比如這樣
expires: wed,
22 nov 201908:
41:00gmt
cache-control
在http/1.1中，採用了cache-control來控制強快取，它並不像http/1.0中使用乙個特定的時間，而是採用過期時長來控制快取，對應的字段是max-age，比如這個例子
cache-control:max-age=
3600
max-age //(單位秒)
s-maxage // 只在**伺服器中生效，比如 cdn 快取
private
// 只有客戶端可以快取
public
// 中間節點也可以快取，比如cdn
no-store // 非常粗暴，不快取
no-cache // 跳過當前的強快取，傳送http請求，即直接進入協商快取
must-revalidate // 告訴瀏覽器、快取伺服器，本地副本過期前，可以使用本地副本；本地副本一旦過期，必須去源伺服器進行有效性校驗(本地過期前不會去發請求校驗)。
強快取失效後，瀏覽器在請求頭攜帶「相應的標籤」來向伺服器傳送請求。由伺服器根據這個tag，來決定是否使用快取，這就是協商快取。
「相應的標籤」分為兩種： 第一種是last-modified，第二種是etag。這兩種各有優劣。
etag
etag是伺服器根據當前檔案的內容，給檔案生成的唯一標識，只要裡面的內容有改動，這個值就會變。伺服器通過響應頭把這個值給瀏覽器。瀏覽器接收到後，如果再次請求，會在請求頭中攜帶if-none-match字段，這個欄位的值也就是伺服器傳來的最後修改時間。伺服器拿到請求頭中的if-none-match的字段後，其實會和這個伺服器中該資源的最後修改時間對比:
last-modified即最後修改時間。第一次向伺服器請求了某個資源後，伺服器會在響應頭返回if-modified-since字段，也就是這個資源的最後修改時間。之後再次請求，會在請求頭中使用last-modified這個字段攜帶if-modified-since的值去和伺服器做比較，如果發生變換，則說明這個資源更新了，返回新的資源。反之，沒有發生變換，則返回304，高速瀏覽器直接使用快取就可以。
兩者對比
在精準度上，etag優於last-modified。優於etag是按照內容給資源上標識，因此能準確感知資源的變化。而last-modified就不一樣了，它在一些特殊的情況並不能準確感知資源變化，主要有兩種情況:
另外，如果兩種方式都支援的話，伺服器會優先考慮etag。
瀏覽器的快取位置一共分為四種，按優先順序從高到低排列分別是：
service worker
memory cache
disk cache
push cache
dom。雖然如此，但它仍然能幫助我們完成很多有用的功能，比如離線快取、訊息推送和網路**等功能。其中的離線快取就是service worker cache。
service worker 同時也是 pwa 的重要實現機制，關於它的細節和特性，我們將會在後面的 pwa 的分享中詳細介紹。
memory cache指的是記憶體快取，從效率上講它是最快的。但是從存活時間來講又是最短的，當渲染程序結束後，記憶體快取也就不存在了。
disk cache就是儲存在磁碟中的快取，從訪問效率上講是比記憶體快取慢的，但是他的優勢在於儲存容量和儲存時長。稍微有些計算機基礎的應該很好理解，就不展開了。
好，現在問題來了，既然兩者各有優劣，那瀏覽器如何決定將資源放進記憶體還是硬碟呢？主要策略如下：
即推送快取，這是瀏覽器快取的最後一道防線。它是http/2中的內容，雖然現在應用的並不廣泛，但隨著 http/2 的推廣，它的應用越來越廣泛。
簡單總結瀏覽器快取
瀏覽器快取 瀏覽器快取是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存，當訪問者再次訪問同一頁面的時候，瀏覽器可以直接從本地磁碟載入文件。為什麼要使用瀏覽器快取 瀏覽器快取作為web效能優化的重要方式之一，那麼瀏覽器快取的過程是怎麼樣的呢？瀏覽器快取過程 在瀏覽器第一次發起請求時，本地無快取，向伺...
瀏覽器快取 簡單介紹
強快取 public 響應會被快取，並且在多使用者間共享。預設是public。private 響應只作為私有的快取，不能在使用者間共享。如果要求http認證，響應會自動設定為private。max age 響應頭設定max age 快取的最大的有效時間，單位為秒 s max age會覆蓋掉expir...
瀏覽器快取機制個人理解
瀏覽器快取究竟有什麼作用呢？在這裡我將瀏覽器快取的作用簡單地歸結為以下幾點。加快頁面開啟速度 降低伺服器壓力 減少網路損耗 瀏覽器快取有 html meta 標籤控制 一般不用，所以本文不介紹 與 http 頭資訊控制兩種。快取標識字段便是expires和cache control。expires ...