前言
緩存對于Web開發(fā)有重要作用，尤其是大負(fù)荷Web系統(tǒng)開發(fā)中。
MDove：當(dāng)然即使不是Web開發(fā)，緩存的意義也是舉足輕重。拿客戶端來說，從硬盤數(shù)據(jù)庫取肯定要比網(wǎng)絡(luò)獲取快，從內(nèi)存取一定比從硬盤數(shù)據(jù)庫取更快。雖說HTTP緩存在客戶端上的場景并不多見，但是其思想是相通的，學(xué)習(xí)一波總歸沒有壞處。
所以今天讓我們聊一聊HTTP中的緩存。
想了解更多關(guān)于Web性能優(yōu)化的知識,請移步：
Web前端性能優(yōu)化：JAVAScript細(xì)節(jié)篇
Web前端性能優(yōu)化：html、css、js篇
高級Web必備：網(wǎng)絡(luò)優(yōu)化，拿去鎮(zhèn)住面試官
更過更全內(nèi)容，歡迎star我的GitHub：https://github.com/programmer-zhang/front-end/
正文
一、緩存的概念知識
- 緩存的分類：服務(wù)器緩存(代理服務(wù)器緩存、CDN 緩存)、第三方緩存、瀏覽器緩存等。
- 緩存的相關(guān)術(shù)語：
- 緩存命中率：從緩存中得到數(shù)據(jù)的請求數(shù)與所有請求數(shù)的比率。理想狀態(tài)是越高越好。
- 過期內(nèi)容：超過設(shè)置的有效時(shí)間，被標(biāo)記為 '陳舊' 的內(nèi)容。通常過期內(nèi)容不能用于回復(fù)客戶端的請求，必須重新向源服務(wù)器請求新的內(nèi)容或者驗(yàn)證緩存的內(nèi)容是否仍然可用。
- 驗(yàn)證：驗(yàn)證緩存中的過期內(nèi)容是否仍然有效，驗(yàn)證通過的話刷新過期時(shí)間或策略。
- 失效：失效就是把內(nèi)容從緩存中移除。當(dāng)內(nèi)容發(fā)生改變時(shí)就必須移除失效的內(nèi)容。
- 另： 瀏覽器緩存是代價(jià)最小的，因?yàn)闉g覽器緩存依賴的是客戶端，而幾乎不耗費(fèi)服務(wù)器端的資源(極端情況下相當(dāng)于純靜態(tài)頁面)。
二、 緩存的作用
- 減少網(wǎng)絡(luò)帶寬消耗
- 降低服務(wù)器壓力
- 減少網(wǎng)絡(luò)延遲，加快頁面打開速度
三、 緩存機(jī)制
- 強(qiáng)緩存優(yōu)先于協(xié)商緩存，強(qiáng)緩存生效則使用強(qiáng)緩存，若強(qiáng)緩存失敗，則進(jìn)行協(xié)商緩存
- 協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效，那么代表該請求的緩存失效，重新獲取請求結(jié)果，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存
緩存策略 圖片來源：IMWeb前端
四、涉及緩存機(jī)制的HTTP-header
4.1、Expires（過期時(shí)間）(強(qiáng)緩存機(jī)制)
- 值：是一個(gè)GMT時(shí)間格式的絕對時(shí)間，Expires 的日期時(shí)間必須是格林威治時(shí)間（GMT），而不是本地時(shí)間。舉例：Expires: Fri, 30 Oct 1998 14:19:41
- 作用：告訴緩存器相關(guān)副本在多長時(shí)間內(nèi)是新鮮的。過了這個(gè)時(shí)間，緩存器就會向源服務(wù)器發(fā)送請求，檢查文檔是否被修改。
- 兼容性：幾乎所有的緩存服務(wù)器都支持Expires（過期時(shí)間）屬性
- 規(guī)則：基于客戶最后查看副本的時(shí)間（最后訪問時(shí)間）或者根據(jù)服務(wù)器上文檔最后被修改的時(shí)間
- 應(yīng)用：
- 對于設(shè)置靜態(tài)圖片文件（例如導(dǎo)航欄和圖片按鈕）緩存特別有用；因?yàn)檫@些圖片修改很少，你可以給它們設(shè)置一個(gè)特別長的過期時(shí)間，這會使你的網(wǎng)站對用戶變得相應(yīng)非常快
- 對于控制有規(guī)律改變的網(wǎng)頁也很有用，例如：你每天早上6點(diǎn)更新新聞頁，你可以設(shè)置副本的過期時(shí)間也是這個(gè)時(shí)間，這樣緩存服務(wù)器就知道什么時(shí)候去取一個(gè)更新版本，而不必讓用戶去按瀏覽器的"刷新"按鈕。
- 過期時(shí)間頭信息屬性值只能是HTTP格式的日期時(shí)間，其他的都會被解析成當(dāng)前時(shí)間"之前"，副本會過期
- 局限性：雖然過期時(shí)間屬性非常有用，但是它還是有些局限，
- 首先：是牽扯到了日期，這樣Web服務(wù)器的時(shí)間和緩存服務(wù)器的時(shí)間必須是同步的，如果有些不同步，要么是應(yīng)該緩存的內(nèi)容提前過期了，要么是過期結(jié)果沒及時(shí)更新。
- 如果你設(shè)置的過期時(shí)間是一個(gè)固定的時(shí)間，如果你返回內(nèi)容的時(shí)候又沒有連帶更新下次過期的時(shí)間，那么之后所有訪問請求都會被發(fā)送給源Web服務(wù)器，反而增加了負(fù)載和響應(yīng)時(shí)間
4.2、Cache-Control（緩存控制）(強(qiáng)緩存機(jī)制)
- 值：max-age=[秒] — 執(zhí)行緩存被認(rèn)為是最新的最長時(shí)間。
- 相對時(shí)間，不是絕對時(shí)間
- 單位是秒：從請求時(shí)間 開始到過期時(shí)間之間的秒數(shù)。
- 作用：讓網(wǎng)站的發(fā)布者可以更全面的控制他們的內(nèi)容，并定位過期時(shí)間的限制。是http 1.1中為了彌補(bǔ) Expires 缺陷新加入的。
- 相關(guān)控制字段：
- s-maxage=[秒] — 類似于max-age屬性，除了他應(yīng)用于共享（如：代理服務(wù)器）緩存
- public — 標(biāo)記認(rèn)證內(nèi)容也可以被緩存，一般來說： 經(jīng)過HTTP認(rèn)證才能訪問的內(nèi)容，輸出是自動不可以緩存的；
- no-cache — 強(qiáng)制每次請求直接發(fā)送給源服務(wù)器，而不經(jīng)過本地緩存版本的校驗(yàn)。這對于需要確認(rèn)認(rèn)證應(yīng)用很有用（可以和public結(jié)合使用），或者嚴(yán)格要求使用最新數(shù)據(jù) 的應(yīng)用（不惜犧牲使用緩存的所有好處）；
- no-store — 強(qiáng)制緩存在任何情況下都不要保留任何副本
- must-revalidate — 告訴緩存必須遵循所有你給予副本的新鮮度的
- proxy-revalidate — 和 must-revalidate 類似，除了他只對緩存代理服務(wù)器起作用
4.3、Last-Modified/If-Modified-Since (協(xié)商緩存機(jī)制)
- 通常服務(wù)器知道你所請求的數(shù)據(jù)的最后修改時(shí)間，并且 HTTP 為服務(wù)器提供了一種將最近修改數(shù)據(jù)連同你請求的數(shù)據(jù)一同發(fā)送的方法。
- 如果你第二次 (或第三次，或第四次) 請求相同的數(shù)據(jù)，告訴服務(wù)器上一次獲得的最后修改日期：在請求中發(fā)送一個(gè) If-Modified-Since 頭信息，它包含了上一次從服務(wù)器連同數(shù)據(jù)所獲得的日期。
- 如果數(shù)據(jù)從那時(shí)起沒有改變，服務(wù)器將返回一個(gè)特殊的 HTTP 狀態(tài)代碼 304，這意味著 “從上一次請求后這個(gè)數(shù)據(jù)沒有改變”。
- 當(dāng)服務(wù)器發(fā)送狀態(tài)編碼 304 時(shí)，不再重新發(fā)送數(shù)據(jù)。所以當(dāng)數(shù)據(jù)沒有更新時(shí)，你不需要一次又一次地下載相同的數(shù)據(jù)
- 兼容性 ：所有現(xiàn)代的瀏覽器都支持 (last-modified) 的數(shù)據(jù)檢查。
4.4、ETag/If-None-Match (協(xié)商緩存機(jī)制)
- 作用： 沒有變化時(shí)不重新下載數(shù)據(jù)
- 工作方式 ：
- 1.Etag是上一次加載資源時(shí)，服務(wù)器返回的 response header，是對該資源的一種唯一標(biāo)識，只要資源有變化，Etag就會重新生成
- 2.瀏覽器在下一次加載資源向服務(wù)器發(fā)送請求時(shí)，會將上一次返回的 Etag 值放到 request header 里的 If-None-Match 里，服務(wù)器比較客戶端傳來的 If-None-Match 跟自己服務(wù)器上該資源的 ETag 是否一致
- 3.如果服務(wù)器發(fā)現(xiàn) ETag 匹配不上，那么直接以常規(guī) GET 200 回包形式將新的資源（當(dāng)然也包括了新的 ETag ）發(fā)給客戶端；如果 ETag 是一致的，則直接返回304知會客戶端直接使用本地緩存即可。
五、幾種緩存策略的對比
5.1、兩種強(qiáng)緩存機(jī)制對比 `Expires` VS `Cache-Control`
- 差別不大，區(qū)別就是 Expires 是 HTTP1.0 的產(chǎn)物，而 Cache-Control 是 HTTP1.1 的產(chǎn)物
- 優(yōu)先級上，兩者同時(shí)存在的話，Cache-Control 優(yōu)先級高于 Expires ,Expires 更像是一種備選方案，在某些不支持 Cache-Control 的環(huán)境中發(fā)揮作用
- 二者共同的弊端 就是這種強(qiáng)緩存的機(jī)制僅僅關(guān)心緩存是否超出或者超過某個(gè)過期時(shí)間，并不關(guān)心服務(wù)器端的資源是否已經(jīng)更新，所以單純使用這兩種緩存策略會導(dǎo)致客戶端拿到的資源不是最新的
5.2、兩種協(xié)商緩存機(jī)制對比 `Last-Modified/If-Modified-Since` VS `ETag/If-None-Match`
- 精度上，ETag 要明顯優(yōu)于前者，Last-Modified/If-Modified-Since 策略的時(shí)間單位為秒，這就意味著在秒級的請求上，做不到真正的及時(shí)更新，但是 ETag 每次請求都會對其進(jìn)行改變從而確保精度，并且在使用負(fù)載均衡的服務(wù)器上，各個(gè)服務(wù)器生成的 Last-Modified 也有可能不相同
- 性能上，ETag 要遜于 Last-Modified/If-Modified-Since 策略，畢竟 Last-Modified/If-Modified-Since 策略只是記錄時(shí)間，而 ETag 需要進(jìn)行一步hash運(yùn)算
- 優(yōu)先級上，服務(wù)器會優(yōu)先考慮 ETag
六、用戶行為對緩存策略的影響
并不是所有的操作都會啟用正常的緩存機(jī)制，在某些用戶行為下，緩存機(jī)制是可以正常跳過的
- 地址欄訪問，鏈接跳轉(zhuǎn)是正常用戶行為，將會觸發(fā)瀏覽器緩存機(jī)制
- F5刷新，瀏覽器會設(shè)置max-age=0，跳過強(qiáng)緩存判斷，會進(jìn)行協(xié)商緩存判斷
- ctrl+F5刷新，跳過強(qiáng)緩存和協(xié)商緩存，直接從服務(wù)器拉取資源
尾聲
既然選擇了遠(yuǎn)方，那學(xué)就完了。
