HTTP緩存是怎樣的一種存在

原文：http://blog.poetries.top/2019/01/02/browser-cache/

情景再現(xiàn)

在某次接口測(cè)試中，發(fā)現(xiàn)這樣一種情況：

產(chǎn)品功能需求是這樣的：點(diǎn)擊APP頁(yè)面上的某個(gè)按鈕，客戶端會(huì)向服務(wù)端發(fā)送一個(gè)URL請(qǐng)求。

然而Charles抓包發(fā)現(xiàn)，第一次點(diǎn)擊該按鈕時(shí)可以正常發(fā)送請(qǐng)求，后來(lái)再多次點(diǎn)擊時(shí)就不發(fā)送該請(qǐng)求了。

What?。。。不科學(xué)呀!

原因排查

首先查看了相關(guān)代碼，的確是每次執(zhí)行該點(diǎn)擊操作都會(huì)發(fā)送請(qǐng)求的，沒(méi)有任何問(wèn)題?？墒菫槭裁春髞?lái)不再發(fā)送請(qǐng)求了呢?

經(jīng)過(guò)深入了解，原來(lái)是http緩存導(dǎo)致的。

下面跟著小編學(xué)習(xí)一下http緩存的相關(guān)知識(shí)，你就明白是怎么回事了~

知識(shí)科普

1. http緩存是怎樣的一種存在

1)什么是緩存

我們平時(shí)說(shuō)的緩存，通常指的是Web緩存，它存在于服務(wù)器和客戶端之間，是一種保存資源副本并在下次請(qǐng)求時(shí)直接使用該副本的技術(shù)。當(dāng)Web緩存發(fā)現(xiàn)請(qǐng)求的資源已經(jīng)被存儲(chǔ)，它會(huì)攔截請(qǐng)求，返回該資源的拷貝，而不會(huì)去源服務(wù)器重新下載。

2)為什么要使用緩存技術(shù)

這是因?yàn)?，通常情況下通過(guò)網(wǎng)絡(luò)獲取內(nèi)容速度慢成本高，有些響應(yīng)需要在客戶端和服務(wù)器之間進(jìn)行多次往返通信，這就拖延了瀏覽器可以使用和處理內(nèi)容的時(shí)間，同時(shí)也增加了訪問(wèn)者的數(shù)據(jù)成本。通過(guò)緩存，使用資源副本，大大減少獲取資源時(shí)間，能夠減少網(wǎng)絡(luò)帶寬消耗、減少延遲與網(wǎng)絡(luò)阻塞，同時(shí)降低服務(wù)器壓力，提高服務(wù)器性能。

3)http緩存又是怎么回事呢

Web緩存從實(shí)現(xiàn)方式大致可以分以下幾種類(lèi)型：

數(shù)據(jù)庫(kù)數(shù)據(jù)緩存;服務(wù)器端緩存(包括代理服務(wù)器緩存和CDN緩存);

瀏覽器端緩存;Web應(yīng)用層緩存。

http緩存就是Web緩存中的瀏覽器端緩存中的基于http協(xié)議實(shí)現(xiàn)的那一種，也是平時(shí)最常見(jiàn)的一種緩存。

2.http緩存是如何工作的

在這一小節(jié)我們先了解下http請(qǐng)求資源緩存的工作流程，然后對(duì)流程中細(xì)節(jié)進(jìn)行解釋說(shuō)明，你就會(huì)對(duì)http緩存的工作原理有更深入的認(rèn)識(shí)。

1)http請(qǐng)求資源的工作流程

第一次請(qǐng)求服務(wù)器資源時(shí)，沒(méi)有緩存文件，直接向服務(wù)器發(fā)送請(qǐng)求。流程如下：

第一次請(qǐng)求流程圖

第二次及以后再請(qǐng)求服務(wù)器資源時(shí)，本地已有緩存，請(qǐng)求端會(huì)進(jìn)行資源是否過(guò)期及更新等相關(guān)判斷，決定是否發(fā)送請(qǐng)求，或發(fā)送帶哪些條件式判斷字段的請(qǐng)求，服務(wù)端視判斷結(jié)果決定返回的響應(yīng)狀態(tài)及是否返回資源。具體流程如下：

非第一次請(qǐng)求流程圖

以上是http緩存請(qǐng)求資源的工作流程圖，http緩存是通過(guò) HTTP 協(xié)議頭里的Cache-Control(或 Expires)和 Last-Modified(或 Etag)等字段來(lái)控制文件緩存的機(jī)制，下面對(duì)流程中的各個(gè)字段及過(guò)程進(jìn)行詳細(xì)說(shuō)明：

1)控制緩存的相關(guān)字段

Pragma 設(shè)置頁(yè)面是否緩存，為Pragma則緩存，no-cache則不緩存。它http1.0遺留的字段，當(dāng)它和cache-control同時(shí)存在的時(shí)候，會(huì)被cache-control覆蓋。

Expires 定義緩存過(guò)期時(shí)間，這個(gè)時(shí)間相對(duì)服務(wù)器上的時(shí)間而言的，它也是http1.0遺留的字段。如Expires:Thu, 30 Aug 2018 08:14:36 GMT。

Cache-Control 也是定義緩存過(guò)期時(shí)間，針對(duì)“Expires時(shí)間是相對(duì)服務(wù)器而言，無(wú)法保證和客戶端時(shí)間統(tǒng)一”的問(wèn)題而在http1.1協(xié)議中新增的，若報(bào)文中同時(shí)出現(xiàn)了Expires 和Cache-Control，則以Cache-Control 為準(zhǔn)。Cache-Control字段的指令說(shuō)明如下：

no-cache特別注意，這個(gè)不是不被緩存的意思!!是會(huì)被緩存的，只不過(guò)每次在向客戶端提供響應(yīng)數(shù)據(jù)時(shí)，緩存都要向服務(wù)器評(píng)估緩存響應(yīng)的有效性;

no-store響應(yīng)不被緩存;

max-age設(shè)置緩存的存在時(shí)間，相對(duì)于發(fā)送請(qǐng)求的時(shí)間，單位為s。在緩存時(shí)間內(nèi)，如果有請(qǐng)求這個(gè)資源，瀏覽器不會(huì)發(fā)出 http請(qǐng)求，而是直接使用本地緩存的文件。如Cache-Control: max-age=604800。

2)控制協(xié)商緩存的字段

Last-Modified/If-Modified-Since

Last-Modified 標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間，如Last-Modified:Tue, 20 Dec 2016 05:01:10 GMT;

If-Modified-Since 當(dāng)帶著If-Modified-Since頭訪問(wèn)服務(wù)器請(qǐng)求資源時(shí)，服務(wù)器會(huì)檢查L(zhǎng)ast-Modified，如果Last-Modified的時(shí)間早于或等于If-Modified-Since則會(huì)返回一個(gè)不帶主體的304響應(yīng)，否則返回200并重新返回資源。

ETag/If-None-Match

ETag 是一個(gè)響應(yīng)首部字段，它是根據(jù)實(shí)體內(nèi)容生成的一段hash字符串，作為資源的唯一標(biāo)識(shí)，由服務(wù)端產(chǎn)生，如：ETag:"0q9QPk4kQr2st/XMvRW8yqEt2iw=";

If-None-Match 是一個(gè)條件式的請(qǐng)求首部。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串Etag進(jìn)行比對(duì),如果匹配服務(wù)器才會(huì)返回帶有所請(qǐng)求資源實(shí)體的200響應(yīng)，否則服務(wù)器會(huì)返回不帶實(shí)體的304響應(yīng)，流程見(jiàn)下圖。如：If-None-Match:"eOM1rC2lomM4oUbYNn0QD/Y4WLg="。

注：ETag優(yōu)先級(jí)比Last-Modified高，同時(shí)存在時(shí)會(huì)以ETag為準(zhǔn)。

協(xié)商緩存流程

學(xué)以致用

最后，回到文章開(kāi)頭的情景進(jìn)行分析，根據(jù)下圖中請(qǐng)求的Response 頭部信息中Expires字段得知，http請(qǐng)求的資源有3個(gè)小時(shí)的緩存時(shí)間，而報(bào)文中同時(shí)也出現(xiàn)了Cache-Control: max-age=10800，也表示資源在本地緩存3個(gè)小時(shí)，此時(shí)無(wú)論二者時(shí)間是否一致，以Cache-Control為準(zhǔn)。這也就解釋了后來(lái)(3個(gè)小時(shí)以?xún)?nèi))再次點(diǎn)擊按鈕時(shí)不再發(fā)送請(qǐng)求的原因。