這篇文章給大家分享的是有關(guān)HTTP緩存的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供開封企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站建設(shè)、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為開封眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

通過(guò)網(wǎng)絡(luò)獲取內(nèi)容既速度緩慢又開銷巨大。較大的響應(yīng)需要在客戶端與服務(wù)器之間進(jìn)行多次往返通信，這會(huì)延遲瀏覽器獲得和處理內(nèi)容的時(shí)間，還會(huì)增加訪問(wèn)者的流量費(fèi)用。因此，緩存并重復(fù)利用之前獲取的資源的能力成為性能優(yōu)化的一個(gè)關(guān)鍵方面。

好在每個(gè)瀏覽器都自帶了 HTTP 緩存實(shí)現(xiàn)功能。您只需要確保每個(gè)服務(wù)器響應(yīng)都提供正確的 HTTP 標(biāo)頭指令，以指示瀏覽器何時(shí)可以緩存響應(yīng)以及可以緩存多久。

Note: 如果您在應(yīng)用中使用 Webview 來(lái)獲取和顯示網(wǎng)頁(yè)內(nèi)容，可能需要提供額外的配置標(biāo)志，以確保 HTTP 緩存得到啟用、其大小根據(jù)用例進(jìn)行了合理設(shè)置并且緩存將持久保存。務(wù)必查看平臺(tái)文檔并確認(rèn)您的設(shè)置！

當(dāng)服務(wù)器返回響應(yīng)時(shí)，還會(huì)發(fā)出一組 HTTP 標(biāo)頭，用于描述響應(yīng)的內(nèi)容類型、長(zhǎng)度、緩存指令、驗(yàn)證令牌等。例如，在上圖的交互中，服務(wù)器返回一個(gè) 1024 字節(jié)的響應(yīng)，指示客戶端將其緩存最多 120 秒，并提供一個(gè)驗(yàn)證令牌（“x234dff”），可在響應(yīng)過(guò)期后用來(lái)檢查資源是否被修改。

通過(guò) ETag 驗(yàn)證緩存的響應(yīng)

TL;DR

服務(wù)器使用 ETag HTTP 標(biāo)頭傳遞驗(yàn)證令牌。

驗(yàn)證令牌可實(shí)現(xiàn)高效的資源更新檢查：資源未發(fā)生變化時(shí)不會(huì)傳送任何數(shù)據(jù)。

假定在首次獲取資源 120 秒后，瀏覽器又對(duì)該資源發(fā)起了新的請(qǐng)求。首先，瀏覽器會(huì)檢查本地緩存并找到之前的響應(yīng)。遺憾的是，該響應(yīng)現(xiàn)已過(guò)期，瀏覽器無(wú)法使用。此時(shí)，瀏覽器可以直接發(fā)出新的請(qǐng)求并獲取新的完整響應(yīng)。不過(guò)，這樣做效率較低，因?yàn)槿绻Y源未發(fā)生變化，那么下載與緩存中已有的完全相同的信息就毫無(wú)道理可言！

這正是驗(yàn)證令牌（在 ETag 標(biāo)頭中指定）旨在解決的問(wèn)題。服務(wù)器生成并返回的隨機(jī)令牌通常是文件內(nèi)容的哈希值或某個(gè)其他指紋?？蛻舳瞬恍枰私庵讣y是如何生成的，只需在下一次請(qǐng)求時(shí)將其發(fā)送至服務(wù)器。如果指紋仍然相同，則表示資源未發(fā)生變化，您就可以跳過(guò)下載。

在上例中，客戶端自動(dòng)在“If-None-Match” HTTP 請(qǐng)求標(biāo)頭內(nèi)提供 ETag 令牌。服務(wù)器根據(jù)當(dāng)前資源核對(duì)令牌。如果它未發(fā)生變化，服務(wù)器將返回“304 Not Modified”響應(yīng)，告知瀏覽器緩存中的響應(yīng)未發(fā)生變化，可以再延用 120 秒。請(qǐng)注意，您不必再次下載響應(yīng)，這節(jié)約了時(shí)間和帶寬。

作為網(wǎng)絡(luò)開發(fā)者，您如何利用高效的重新驗(yàn)證？瀏覽器會(huì)替我們完成所有工作：它會(huì)自動(dòng)檢測(cè)之前是否指定了驗(yàn)證令牌，它會(huì)將驗(yàn)證令牌追加到發(fā)出的請(qǐng)求上，并且它會(huì)根據(jù)從服務(wù)器接收的響應(yīng)在必要時(shí)更新緩存時(shí)間戳。我們唯一要做的就是確保服務(wù)器提供必要的 ETag 令牌。檢查您的服務(wù)器文檔中有無(wú)必要的配置標(biāo)志。

Note: 提示：HTML5 Boilerplate 項(xiàng)目包含所有最流行服務(wù)器的配置文件樣例，其中為每個(gè)配置標(biāo)志和設(shè)置都提供了詳細(xì)的注解。在列表中找到您喜愛(ài)的服務(wù)器，查找合適的設(shè)置，然后復(fù)制/確認(rèn)您的服務(wù)器配置了推薦的設(shè)置。

Cache-Control

TL;DR

每個(gè)資源都可通過(guò) Cache-Control HTTP 標(biāo)頭定義其緩存策略

Cache-Control 指令控制誰(shuí)在什么條件下可以緩存響應(yīng)以及可以緩存多久。

從性能優(yōu)化的角度來(lái)說(shuō)，最佳請(qǐng)求是無(wú)需與服務(wù)器通信的請(qǐng)求：您可以通過(guò)響應(yīng)的本地副本消除所有網(wǎng)絡(luò)延遲，以及避免數(shù)據(jù)傳送的流量費(fèi)用。為實(shí)現(xiàn)此目的，HTTP 規(guī)范允許服務(wù)器返回 Cache-Control 指令，這些指令控制瀏覽器和其他中間緩存如何緩存各個(gè)響應(yīng)以及緩存多久。

Note: Cache-Control 標(biāo)頭是在 HTTP/1.1 規(guī)范中定義的，取代了之前用來(lái)定義響應(yīng)緩存策略的標(biāo)頭（例如 Expires）。所有現(xiàn)代瀏覽器都支持 Cache-Control，因此，使用它就夠了。

“no-cache”和“no-store”

“no-cache”表示必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否發(fā)生了變化，然后才能使用該響應(yīng)來(lái)滿足后續(xù)對(duì)同一網(wǎng)址的請(qǐng)求。因此，如果存在合適的驗(yàn)證令牌 (ETag)，no-cache 會(huì)發(fā)起往返通信來(lái)驗(yàn)證緩存的響應(yīng)，但如果資源未發(fā)生變化，則可避免下載。

相比之下，“no-store”則要簡(jiǎn)單得多。它直接禁止瀏覽器以及所有中間緩存存儲(chǔ)任何版本的返回響應(yīng)，例如，包含個(gè)人隱私數(shù)據(jù)或銀行業(yè)務(wù)數(shù)據(jù)的響應(yīng)。每次用戶請(qǐng)求該資產(chǎn)時(shí)，都會(huì)向服務(wù)器發(fā)送請(qǐng)求，并下載完整的響應(yīng)。

“public”與“private”

如果響應(yīng)被標(biāo)記為“public”，則即使它有關(guān)聯(lián)的 HTTP 身份驗(yàn)證，甚至響應(yīng)狀態(tài)代碼通常無(wú)法緩存，也可以緩存響應(yīng)。大多數(shù)情況下，“public”不是必需的，因?yàn)槊鞔_的緩存信息（例如“max-age”）已表示響應(yīng)是可以緩存的。

相比之下，瀏覽器可以緩存“private”響應(yīng)。不過(guò)，這些響應(yīng)通常只為單個(gè)用戶緩存，因此不允許任何中間緩存對(duì)其進(jìn)行緩存。例如，用戶的瀏覽器可以緩存包含用戶私人信息的 HTML 網(wǎng)頁(yè)，但 cdn 卻不能緩存。

“max-age”

指令指定從請(qǐng)求的時(shí)間開始，允許獲取的響應(yīng)被重用的最長(zhǎng)時(shí)間（單位：秒）。例如，“max-age=60”表示可在接下來(lái)的 60 秒緩存和重用響應(yīng)。

定義最佳 Cache-Control 策略

按照以上決策樹為您的應(yīng)用使用的特定資源或一組資源確定最佳緩存策略。在理想的情況下，您的目標(biāo)應(yīng)該是在客戶端上緩存盡可能多的響應(yīng)，緩存盡可能長(zhǎng)的時(shí)間，并且為每個(gè)響應(yīng)提供驗(yàn)證令牌，以實(shí)現(xiàn)高效的重新驗(yàn)證。

根據(jù) HTTP Archive，在排名最高的 300,000 個(gè)網(wǎng)站（按照 Alexa 排名）中，所有下載的響應(yīng)中幾乎有半數(shù)可由瀏覽器緩存，這可以大量減少重復(fù)的網(wǎng)頁(yè)瀏覽和訪問(wèn)。當(dāng)然，這并不意味著您的特定應(yīng)用有 50% 的資源可以緩存。一些網(wǎng)站的資源 90% 以上都可以緩存，而其他網(wǎng)站可能有許多私密或時(shí)效要求高的數(shù)據(jù)根本無(wú)法緩存。

請(qǐng)審核您的網(wǎng)頁(yè)，確定哪些資源可以緩存，并確保它們返回正確的 Cache-Control 和 ETag 標(biāo)頭。

廢棄和更新緩存的響應(yīng)

TL;DR

在資源“過(guò)期”之前，將一直使用本地緩存的響應(yīng)。

您可以通過(guò)在網(wǎng)址中嵌入文件內(nèi)容指紋，強(qiáng)制客戶端更新到新版本的響應(yīng)。

為獲得最佳性能，每個(gè)應(yīng)用都需要定義自己的緩存層次結(jié)構(gòu)。

瀏覽器發(fā)出的所有 HTTP 請(qǐng)求會(huì)首先路由到瀏覽器緩存，以確認(rèn)是否緩存了可用于滿足請(qǐng)求的有效響應(yīng)。如果有匹配的響應(yīng)，則從緩存中讀取響應(yīng)，這樣就避免了網(wǎng)絡(luò)延遲和傳送產(chǎn)生的流量費(fèi)用。

不過(guò)，如果您想更新或廢棄緩存的響應(yīng)，該怎么辦？例如，假定您已告訴訪問(wèn)者將某個(gè) CSS 樣式表緩存長(zhǎng)達(dá) 24 小時(shí) (max-age=86400)，但設(shè)計(jì)人員剛剛提交了一個(gè)您希望所有用戶都能使用的更新。您該如何通知擁有現(xiàn)在“已過(guò)時(shí)”的 CSS 緩存副本的所有訪問(wèn)者更新其緩存？在不更改資源網(wǎng)址的情況下，您做不到。

瀏覽器緩存響應(yīng)后，緩存的版本將一直使用到過(guò)期（由 max-age 或 expires 決定），或一直使用到由于某種其他原因從緩存中刪除，例如用戶清除了瀏覽器緩存。因此，構(gòu)建網(wǎng)頁(yè)時(shí)，不同的用戶可能最終使用的是文件的不同版本；剛獲取了資源的用戶將使用新版本的響應(yīng)，而緩存了早期（但仍有效）副本的用戶將使用舊版本的響應(yīng)。

所以，如何才能魚和熊掌兼得：客戶端緩存和快速更新？您可以在資源內(nèi)容發(fā)生變化時(shí)更改它的網(wǎng)址，強(qiáng)制用戶下載新響應(yīng)。通常情況下，可以通過(guò)在文件名中嵌入文件的指紋或版本號(hào)來(lái)實(shí)現(xiàn) - 例如 style.x234dff.css。

因?yàn)槟軌蚨x每個(gè)資源的緩存策略，所以您可以定義“緩存層次結(jié)構(gòu)”，這樣不但可以控制每個(gè)響應(yīng)的緩存時(shí)間，還可以控制訪問(wèn)者看到新版本的速度。為了進(jìn)行說(shuō)明，我們一起分析一下上面的示例：

HTML 被標(biāo)記為“no-cache”，這意味著瀏覽器在每次請(qǐng)求時(shí)都始終會(huì)重新驗(yàn)證文檔，并在內(nèi)容變化時(shí)獲取最新版本。此外，在 HTML 標(biāo)記內(nèi)，您在 CSS 和 JavaScript 資產(chǎn)的網(wǎng)址中嵌入指紋：如果這些文件的內(nèi)容發(fā)生變化，網(wǎng)頁(yè)的 HTML 也會(huì)隨之改變，并會(huì)下載 HTML 響應(yīng)的新副本。

允許瀏覽器和中間緩存（例如 CDN）緩存 CSS，并將 CSS 設(shè)置為 1 年后到期。請(qǐng)注意，您可以放心地使用 1 年的“遠(yuǎn)期過(guò)期”，因?yàn)槟谖募星度肓宋募闹讣y：CSS 更新時(shí)網(wǎng)址也會(huì)隨之變化。

JavaScript 同樣設(shè)置為 1 年后到期，但標(biāo)記為 private，這或許是因?yàn)樗哪承┯脩羲饺藬?shù)據(jù)是 CDN 不應(yīng)緩存的。

圖像緩存時(shí)不包含版本或唯一指紋，并設(shè)置為 1 天后到期。

您可以組合使用 ETag、Cache-Control 和唯一網(wǎng)址來(lái)實(shí)現(xiàn)一舉多得：較長(zhǎng)的過(guò)期時(shí)間、控制可以緩存響應(yīng)的位置以及隨需更新。

緩存檢查清單

不存在什么最佳緩存策略。您需要根據(jù)通信模式、提供的數(shù)據(jù)類型以及應(yīng)用特定的數(shù)據(jù)更新要求，為每個(gè)資源定義和配置合適的設(shè)置，以及整體的“緩存層次結(jié)構(gòu)”。

在制定緩存策略時(shí)，您需要牢記下面這些技巧和方法：

使用一致的網(wǎng)址：如果您在不同的網(wǎng)址上提供相同的內(nèi)容，將會(huì)多次獲取和存儲(chǔ)這些內(nèi)容。提示：請(qǐng)注意，網(wǎng)址區(qū)分大小寫。

確保服務(wù)器提供驗(yàn)證令牌 (ETag)：有了驗(yàn)證令牌，當(dāng)服務(wù)器上的資源未發(fā)生變化時(shí)，就不需要傳送相同的字節(jié)。

確定中間緩存可以緩存哪些資源：對(duì)所有用戶的響應(yīng)完全相同的資源非常適合由 CDN 以及其他中間緩存進(jìn)行緩存。

為每個(gè)資源確定最佳緩存周期：不同的資源可能有不同的更新要求。為每個(gè)資源審核并確定合適的 max-age。

確定最適合您的網(wǎng)站的緩存層次結(jié)構(gòu)：您可以通過(guò)為 HTML 文檔組合使用包含內(nèi)容指紋的資源網(wǎng)址和短時(shí)間或 no-cache 周期，來(lái)控制客戶端獲取更新的速度。

最大限度減少攪動(dòng)：某些資源的更新比其他資源頻繁。如果資源的特定部分（例如 JavaScript 函數(shù)或 CSS 樣式集）會(huì)經(jīng)常更新，可以考慮將其代碼作為單獨(dú)的文件提供。這樣一來(lái)，每次獲取更新時(shí)，其余內(nèi)容（例如變化不是很頻繁的內(nèi)容庫(kù)代碼）可以從緩存獲取，從而最大限度減少下載的內(nèi)容大小。

感謝各位的閱讀！關(guān)于HTTP緩存的示例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！