資訊專欄INFORMATION COLUMN
摘要：引言記得當年面試創新工場前端實習生時，面試官曾經給了我一個建議，讓我有空去了解一下瀏覽器緩存機制，很有意思的。通俗的講，判斷瀏覽器是否有緩存就是去判斷本地是否有對應的文件。參考資料徹底理解瀏覽器緩存機制瀏覽器的協商緩存與強緩存
引言
記得當年面試創新工場前端實習生時，面試官曾經給了我一個建議，讓我有空去了解一下瀏覽器緩存機制，很有意思的。當時的我因為拿到了實習 offer 之后就把這句話忘在了腦后。直到校招季，就在面試即將結束的時候，面試官微笑著問我“能說一下瀏覽器緩存的知識嗎？”然后不負眾望，面試官笑容漸漸消失，回家后等了幾天收到了感謝信。
學習的過程就是從不會到會，花了一個小時時間拜讀網上的相關博客，終于對瀏覽器緩存有了初步認識，開篇文章記錄下來，加深學習印象，也分享給也許現在不明白但是馬上就要明白的你。
通俗地講，瀏覽器緩存就是把曾經訪問過的資源拷貝一份副本存在瀏覽器中，當以后再次訪問該網站時會根據一系列判斷最終決定是從瀏覽器中直接將曾經存儲的副本拿出來還是去服務器獲取。
那么使用瀏覽器緩存的原因也就很明顯了：
減少服務器壓力
減少網絡帶寬消耗
提升頁面打開速度
過程我們可以簡單思考一下，在什么情況下我們會去直接使用瀏覽器緩存呢？
首先，我們要有相應的緩存。
其次，我們的緩存沒有過期。
（上面兩句是我不負責任的回答，具體流程請看下面）
這里我們借用網絡上的一張圖片來大概了解一下過程：
當我們第一次打開某網站時，我們的本地是不存在相應的緩存的，于是我們需要向服務器請求對應的資源，根據返回的內容，判斷是否將資源緩存在本地，最后將頁面呈現出來。
當我們再次訪問該網站時，我們發現本地有相應的緩存，于是我們先要判斷該緩存是否過期，如果沒有，則從緩存中讀取內容。如果過期，我們會發送請求判斷是否使用該緩存，如果不使用，則向服務器請求資源，再根據情況判斷是否更新本地緩存。
根據上面大致的流程，我們將要引出兩個非常重要的概念。
強緩存和協商緩存 強緩存用戶發送的請求，直接從客戶端緩存讀取，不發送請求到服務器，不與服務器發生交互行為。
協商緩存用戶發送的請求，發送到服務器后，由服務器判斷是否存緩存中獲取資源。若結果為是，則返回 304 ；若不是，則返回 200 。
共同點：客戶端獲得得數據都是從客戶端緩存中獲取。
不同點：強緩存不與服務器發生交互，而協商緩存需要與服務器交互。
我們前面也簡單說了，所謂的“瀏覽器緩存”其實就是用戶的本地資源，不同瀏覽器的緩存文件地址也不相同。
通俗的講，判斷瀏覽器是否有緩存就是去判斷本地是否有對應的文件。
（這里不作重點所以介紹的非常簡單，如有興趣可百度不同的瀏覽器緩存位置自行查看）
瀏覽器在對資源緩存過后，會將服務器端當時的 response header 保留下來，如下圖所示：
其中 Date 字段表示此次緩存時服務器的時間。
其中標紅的兩個字段是該過程的重點： Expires 和 Cache-Control
這是 HTTP1.0 中的標準，表示為過期時間（服務器時間）
Cache-Control這是 HTTP1.1 中的標準，表示為相對的過期時間。單位為秒。有如下屬性：
max-age： 設置緩存的最大的有效時間。存在 max-age 會覆蓋掉 Expires
s-maxage： 只用于共享緩存，比如CDN緩存（s -> share）。與 max-age 的區別是：max-age 用于普通緩存，而 s-maxage 用于代理緩存。如果存在 s-maxage ，則會覆蓋 max-age 和 Expires
public：響應會被緩存，并且在多用戶間共享。默認是 public
private： 響應只作為私有的緩存，不能在用戶間共享。如果要求HTTP認證，響應會自動設置為private
no-cache： 指定不緩存響應，表明資源不進行緩存。但是設置了 no-cache 之后并不代表瀏覽器不緩存，而是在緩存前要向服務器確認資源是否被更改。因此有的時候只設置 no-cache 防止緩存還是不夠保險，還可以加上 private 指令，將過期時間設為過去的時間
no-store： 絕對禁止緩存
must-revalidate： 如果頁面過期，則去服務器進行獲取
我們可以發現， HTTP1.0 標準中的 Expires 存在一個問題：如果本地時間和服務器時間不一致，就會出現偏差。于是在 HTTP1.1 中使用了相對時間 Cache-Control 來彌補這個問題。
于是乎，判斷緩存是否過期的步驟就是：
查看是否存在 Cache-Control 中的 max-age / s-maxage ，如果有，則用 Date 值與其相加計算出過期時間，將當前時間與過期時間進行比較判斷是否過期。
查看是否存在 Cache-Control 中的 max-age / s-maxage ，如果沒有，則用 expires 作為過期時間比較。
這里執行完畢后，如果判斷結果為沒有過期，則使用客戶端緩存，也就是命中“強緩存”。
是否使用緩存如果通過上述過程發現緩存過期了，這里我們就要與服務器協商是否使用緩存。
看上面的圖，這時我們需要注意的是 ETag 和 Last-Modified 屬性：
資源的標識。每個文件不相同，主要用于區分文件是否相同。
Last-modified請求的資源上次的修改時間。
我們會向服務器發送請求，如果上一次的緩存中存在以上兩個屬性，那么瀏覽器會在 request header 中加入 If-Modified-Since （值為 Last-modified 的值）和 If-None-Match （值為 ETag 的值）。
這兩個值分別為客戶端保留的資源上次修改時間和資源的標識。
如果沒有變化，則命中“協商緩存”，返回 304
用戶行為對緩存的 影響 結束語以上就是瀏覽器緩存相關的入門知識，如果哪里有描述不正確請及時告知我，非常感謝，同時希望這篇文章能對你有所幫助。
參考資料：
徹底理解瀏覽器緩存機制
瀏覽器的協商緩存與強緩存
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/62051.html
摘要：讓你收獲滿滿碼個蛋從年月日推送第篇文章一年過去了已累積推文近篇文章，本文為年度精選，共計篇，按照類別整理便于讀者主題閱讀。本篇文章是今年的最后一篇技術文章，為了讓大家在家也能好好學習，特此花了幾個小時整理了這些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 讓你收獲滿滿！ 碼個蛋從2017年02月20...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
摘要：框架具有輕便，開源的優點，所以本譯見構建用戶管理微服務五使用令牌和來實現身份驗證往期譯見系列文章在賬號分享中持續連載，敬請查看在往期譯見系列的文章中，我們已經建立了業務邏輯數據訪問層和前端控制器但是忽略了對身份進行驗證。 重拾后端之Spring Boot（四）：使用JWT和Spring Security保護REST API 重拾后端之Spring Boot（一）：REST API的搭建...
摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
閱讀 4165·2021-11-22 13:52
閱讀 2086·2021-09-22 15:12
閱讀 1125·2019-08-30 15:53
閱讀 3458·2019-08-29 17:12
閱讀 2196·2019-08-29 16:23
閱讀 1657·2019-08-26 13:56
閱讀 1778·2019-08-26 13:44
閱讀 1891·2019-08-26 11:56
