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