[[250907]]

什么是緩存

平時(shí)生活當(dāng)中緩存一集電視劇，下載一首歌;這些資源是可以直接離線觀看的，沒(méi)有去請(qǐng)求網(wǎng)絡(luò)，資源在本地。

瀏覽器中的緩存又是什么

如上所說(shuō)，緩存即是離線的資源;對(duì)于瀏覽器開(kāi)發(fā)者而言，緩存不是我們用瀏覽器下載了什么， 而是比如我們通過(guò)瀏覽器打開(kāi)過(guò)一個(gè)網(wǎng)頁(yè)，這個(gè)網(wǎng)頁(yè)里面所包含的資源(圖片、css文件、js文件等)在無(wú)感知的情況下，緩存在了本地。

瀏覽器中緩存的步驟是什么樣的

我們知道瀏覽器會(huì)有緩存，那么是我們每次去打開(kāi)之前已經(jīng)打開(kāi)過(guò)的網(wǎng)站，都是用的緩存嗎?當(dāng)然不是!!!瀏覽器有一套協(xié)議來(lái)管理什么時(shí)候需要去請(qǐng)求服務(wù)器，什么時(shí)候使用本地緩存;這套協(xié)議就叫做緩存協(xié)議(緩存機(jī)制)。

一起來(lái)看一下這套機(jī)制的流程是什么樣的：

很隨意的來(lái)解釋一下這張圖：

1.瀏覽器發(fā)出請(qǐng)求，檢查本地是否有緩存;

2.如果有緩存，判斷緩存是否過(guò)期;

3.如果過(guò)期，向服務(wù)器發(fā)送驗(yàn)證當(dāng)前本地資源還是否可用，如果可用，返回狀態(tài)碼304，使用本地緩存。如果不可用，返回狀態(tài)碼200，并返回新資源，并把資源寫(xiě)入到緩存當(dāng)中。

4.如果沒(méi)有過(guò)期，直接載入緩存資源使用。

打開(kāi)瀏覽器開(kāi)發(fā)工具= >network;可以看到如下圖:

• ***個(gè)資源是請(qǐng)求返回的新資源。
• 第二個(gè)和第三個(gè)是讀取內(nèi)存當(dāng)中的資源，耗費(fèi)時(shí)間為0ms。
• 后面幾個(gè)是讀取本地硬盤(pán)里面的緩存資源，讀取硬盤(pán)比較慢，所以有時(shí)間花銷，但總體是比請(qǐng)求網(wǎng)絡(luò)快的多。

怎么判斷是否有緩存

在***次請(qǐng)求頁(yè)面成功返回資源后，會(huì)記錄的每一個(gè)緩存文件與其url的對(duì)應(yīng)關(guān)系，存儲(chǔ)在本地，下一次再請(qǐng)求的時(shí)候，或者瀏覽器打開(kāi)之后，通過(guò)請(qǐng)求資源的url去匹配是否有對(duì)應(yīng)的資源;來(lái)確認(rèn)這個(gè)文件是否有緩存(此處并不能確認(rèn)文件是否已經(jīng)過(guò)期)。

怎么判斷***的緩存是否可用

通過(guò)上一步***緩存資源之后，首先會(huì)查看緩存協(xié)議的里的相關(guān)配置字段(Cache-Control、Expires);查看當(dāng)前緩存是否過(guò)期，是否還可用。

cache-control字段的含義

Expires字段

當(dāng)兩個(gè)字段都有的時(shí)候，會(huì)忽略掉Expires字段。

如果緩存資源不可用，怎么處理

根據(jù)配置，如果發(fā)現(xiàn)資源可用，終止請(qǐng)求，返回緩存資源;發(fā)現(xiàn)不可用時(shí)候，回發(fā)起網(wǎng)絡(luò)請(qǐng)求，在發(fā)起網(wǎng)絡(luò)請(qǐng)求的時(shí)候，回去查看是否存在Etag字段、Last-Modified字段;

1.如果沒(méi)有發(fā)現(xiàn)相關(guān)字段，直接發(fā)起請(qǐng)求，返回相關(guān)資源，寫(xiě)入緩存當(dāng)中;

2.如果發(fā)現(xiàn)了Etag、Last-Modified字段，附帶上相應(yīng)的字段內(nèi)容，發(fā)起請(qǐng)求，服務(wù)端會(huì)根據(jù)你發(fā)起的字段內(nèi)容做匹配，如果匹配成功，說(shuō)明在客戶端的緩存資源還是可用的，返回304。如果匹配失敗，服務(wù)端會(huì)返回200，并攜帶上相應(yīng)的資源文件。

那么Etag字段和Last-Modified字段又代表什么意思呢?他們的作用又是什么呢?

這兩個(gè)字段是在資源返回的時(shí)候請(qǐng)求header頭攜帶回來(lái)的。

Etag字段：表示請(qǐng)求資源在服務(wù)器的唯一標(biāo)識(shí)，瀏覽器可以根據(jù)ETag值緩存數(shù)據(jù)，下次請(qǐng)求的時(shí)候以If-None-Match字段請(qǐng)求。

Etag

Last-Modified字段：用于標(biāo)記請(qǐng)求資源的***一次修改時(shí)間。請(qǐng)求的時(shí)候以If-Modified-Since字段請(qǐng)求。

Last-Modified

If-Modified-Since

全部過(guò)程解析

以下是http緩存可能涉及到的所有的字段：

若有不足，還望斧正！