左鵬飛 2017.09.25本文詳細講解了瀏覽器端快取的分類：200 from cache和304 not modified；介紹了http1.1 header cache-control的max-age和http1.0 header expires的區別；介紹了http1.1 header etag、if-none-match和http1.0 header last-modified、if-modified-since的區別。
在一般的**中，靜態資源使用頻率高，流量占用大。對於訪問量稍大的**，都會把靜態資源放置到 cdn 伺服器，不占用業務伺服器的網路頻寬，而達到更好的使用者體驗。
對於前端開發者來說，我們主要跟瀏覽器中的快取打交道，上圖流程是簡化版的;事實上在實際應用中通常採用靜態資源伺服器（cdn）。
下面這張圖展示了某一**，對不同資源的請求結果，其中可以看到有的資源直接從快取中讀取，有的資源跟伺服器進行了再驗證，有的資源重新從伺服器端獲取。
注意，我們討論的所有關於快取資源的問題，都僅僅針對get請求。而對於post,delete,put這類行為性操作通常不做任何快取。
指定設定快取最大的有效時間，定義的是時間長短。當瀏覽器向伺服器傳送請求後，在max-age這段時間裡瀏覽器就不會再向伺服器傳送請求了。
指定響應可以在**快取中被快取，於是可以被多使用者共享。如果沒有明確指定private，則預設為public。
響應只能在私有快取中被快取，不能放在**快取上。對一些使用者資訊敏感的資源，通常需要設定為private。
表示必須先與伺服器確認資源是否被更改過（依靠if-none-match和etag），然後再決定是否使用本地快取。關於cache-control的使用，見下面這張圖
http通過快取將伺服器資源的副本保留一段時間，這段時間稱為新鮮度限值。這在一段時間內請求相同資源不會再通過伺服器。http協議中cache-control 和 expires可以用來設定新鮮度的限值，前者是http1.1中新增的響應頭，後者是http1.0中的響應頭。二者所做的事時都是相同的，但由於cache-control使用的是相對時間，而expires可能存在客戶端與伺服器端時間不一樣的問題，所以我們更傾向於選擇cache-control。
html**
當在5秒內第二次訪問頁面時，瀏覽器會直接從快取中取得資源
瀏覽器或**快取中快取的資源過期了，並不意味著它和原始伺服器上的資源有實際的差異，僅僅意味著到了要進行核對的時間了。這種情況被稱為伺服器再驗證。
http1.1推薦使用的驗證方式是if-none-match/etag，在http1.0中則使用if-modified-since/last-modified。
etag是指根據實體內容生成一段hash字串，標識資源的狀態，由服務端產生。瀏覽器會將這串字串傳回伺服器，驗證資源是否已經修改，如果沒有修改，過程如下：
**示例
這兩個是http1.0中用來驗證資源是否過期的請求/響應頭，這兩個頭部都是日期，驗證過程與etag類似，這裡不詳細介紹。使用這兩個頭部來驗證資源是否更新時，存在以下問題：
demo
posted @
2018-10-17 15:27
牧雲流 閱讀(
...)
編輯收藏
前端快取 瀏覽器快取機制
瀏覽器第一次向伺服器發起該請求後拿到請求結果後,將請求結果和快取標識存入瀏覽器快取,瀏覽器對於快取的處理是根據第一次請求資源時返回的響應頭來確定的。瀏覽器中的快取作用分為兩種情況，一種是需要傳送http請求，一種是不需要傳送。expires 即過期時間 expires max age 請求時間 存在...
前端之瀏覽器快取機制
很早就想梳理一下瀏覽器的快取機制了，一直沒有時間，實際是上懶啦 你知道的，人都有惰性，本大神只是個假神o o，也不例外。難得今天較為清閒，還是借鑑一下成功人的經驗，梳理一下吧，好記性不如爛筆頭，說不定哪次面試遇到了呢 在前端開發中，效能是乙個永恆的話題，沒有最好，只有更好。判斷乙個 效能好壞，乙個直...
瀏覽器快取機制
最近在準備優化日誌請求時遇到了一些令人疑惑的問題，比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求，為什麼多次訪問時有時請求裡帶了 etag，有時又沒有帶？等等。後來查了一些資料以及同事親自驗證，總算對這些問題有了個清晰的理解，現在整理出來以...