有時(shí)，當(dāng)?shù)诙卧L問(wèn)網(wǎng)站時(shí)，看起來(lái)比較怪，樣式不正常。

通常，是因?yàn)?cache control 緩存控制策略定義不正確，導(dǎo)致服務(wù)端最新部署之后客戶端沒(méi)有接收到最新的更改。

本文將向您展示正確的緩存設(shè)置，以便在每次部署后使所有用戶的網(wǎng)站保持最新?tīng)顟B(tài)。

緩存在后臺(tái)如何工作？

瀏覽器為了提高性能，向服務(wù)器請(qǐng)求資源時(shí)，都盡量多從本地緩存獲取，盡量少?gòu)姆?wù)器獲取。

具體行為我們可以通過(guò)指令來(lái)控制，通過(guò)設(shè)置 HTTP 響應(yīng)頭來(lái)實(shí)現(xiàn)。

緩存處理相關(guān)的最常用指令包括：

• Cache-Control
• Expires
• Etag
• Last-Modified

如果沒(méi)有設(shè)置緩存控制指令，瀏覽器將從服務(wù)器獲取每個(gè)資源，這會(huì)增加頁(yè)面的加載時(shí)間。

沒(méi)有緩存設(shè)置的請(qǐng)求流程：

由瀏覽器決定如何在沒(méi)有服務(wù)器指示的情況下緩存信息。

不同瀏覽器策略不同，例如 Chrome 和 Safari 每次都從后端下載數(shù)據(jù)。

為了清楚地定義緩存的處理方式，讓我們深入了解一下緩存控制指令。

Etag(實(shí)體標(biāo)簽)

Etag 可以讓我們?cè)诓挥孟螺d資源的情況下，就知道服務(wù)器上的資源是否變更了。

服務(wù)器在給瀏覽器發(fā)送資源文件時(shí)(例如 css 文件)，會(huì)對(duì)此資源內(nèi)容計(jì)算出一個(gè) hash 值，作為此文件的 tag，一起發(fā)送給瀏覽器。

瀏覽器下次請(qǐng)求此資源文件時(shí)，先把這個(gè) tag 發(fā)給服務(wù)器，HTTP header 信息例如：

If-None-Match: W/“1d2e7–1648e509289”

服務(wù)器和本地文件的 hash 值對(duì)比。

如果一樣，就告訴瀏覽器沒(méi)有變化，可以使用緩存文件，否則瀏覽器下載新文件。

使用Etag請(qǐng)求流-第一次加載：

使用Etag請(qǐng)求流-第二次加載：

啟用 Etag 緩存策略后，我們總是會(huì)去服務(wù)器檢查文件的哈希值，然后瀏覽器才會(huì)決定從緩存中提取文件或?qū)⑵渫耆虞d。

如果未修改，則無(wú)論您要請(qǐng)求的是10KB還是10MB的文件，只需80–100字節(jié)即可進(jìn)行驗(yàn)證。

Last Modified

服務(wù)器有每個(gè)文件的最后修改時(shí)間戳，在第一次文件加載之后，客戶端會(huì)向服務(wù)器詢問(wèn)此文件在某時(shí)間之后是否更改過(guò)。

HTTP header 信息例如：

If-Modified-Since: Fri, 13 Jul 2018 10:49:23 GMT

如果改了，就下載新文件，否則使用緩存。

看著挺好，但現(xiàn)實(shí)情況并不一定是這樣的，“Last-Modified” 是一個(gè)弱緩存頭信息，瀏覽器有自己的緩存策略，會(huì)自行決定是否從緩存中獲取資源或下載新文件，不同瀏覽器處理方式也不一樣。

使用 Last-Modified 的請(qǐng)求流程 - 第一次加載：

使用 Last-Modified 的請(qǐng)求流程 - 第二次加載(完美情況)：

使用 Last-Modified 的請(qǐng)求流程 - 第二次加載(通常情況)：

所以，“Last-Modified” 是不可靠的，我寧愿完全不使用他。

Cache-Control max-age

這個(gè)指令告訴瀏覽器此文件在本地緩存多長(zhǎng)時(shí)間。

以秒為單位，形式為：

Cache-Control: max-age=31536000

使用此策略后，瀏覽器完全不用向服務(wù)器發(fā)起請(qǐng)求了，直接使用本地緩存，非常快。

但是，沒(méi)有辦法確保這段時(shí)間內(nèi)服務(wù)器中的文件不會(huì)修改。

因此，為了讓瀏覽器下載最新的文件，我們可以使用一些構(gòu)建工具，例如 Webpack、Gulp。

每個(gè)文件都在服務(wù)器中進(jìn)行預(yù)編譯，對(duì)文件內(nèi)容進(jìn)行 hash 計(jì)算，把 hash 值添加到文件名中，例如 “app-72420c47cc.css”。

這樣，文件內(nèi)容的變化就可以反應(yīng)在文件名上，對(duì)瀏覽器來(lái)講就是一個(gè)新的文件，舊文件的緩存也就沒(méi)有了，會(huì)從服務(wù)器上獲取新的。

這個(gè)方法適用于 CSS JS 和圖片文件。

no-cache

no-cache(無(wú)緩存)不意味著根本沒(méi)有緩存，它只是告訴瀏覽器在使用緩存之前先驗(yàn)證服務(wù)器上的資源。

需要與 Etag 一起使用，因此瀏覽器將發(fā)送一個(gè)簡(jiǎn)單請(qǐng)求并加載額外的80個(gè)字節(jié)以驗(yàn)證文件的狀態(tài)。

對(duì)于 HTML 文件，就需要使用 “no-cache”。

最終方案

使用 Gulp，Webpack 這類工具將唯一的哈希值添加到 css，js 和圖像文件(如app-67ce7f3483.css)。

對(duì)于 js，css 和圖像文件，設(shè)置 Cache-Control：public，max-age = 31536000，不設(shè)置 Etag 和 Last-Modified。

對(duì)于 HTML 文件，設(shè)置 Cache-Control: no-cache 和 Etag。

翻譯整理自：

https://medium.com/pixelpoint/best-practices-for-cache-control-settings-for-your-website-ff262b38c5a20

總結(jié)

以上是生活随笔為你收集整理的cache-control_网站 cache control 最佳实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。