[[250907]]

什么是緩存

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

瀏覽器中的緩存又是什么

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

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

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

一起來看一下這套機制的流程是什么樣的：

很隨意的來解釋一下這張圖：

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

2.如果有緩存，判斷緩存是否過期;

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

4.如果沒有過期，直接載入緩存資源使用。

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

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

怎么判斷是否有緩存

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

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

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

cache-control字段的含義

Expires字段

當(dāng)兩個字段都有的時候，會忽略掉Expires字段。

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

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

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

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

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

這兩個字段是在資源返回的時候請求header頭攜帶回來的。

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

Etag

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

Last-Modified

If-Modified-Since

全部過程解析

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

若有不足，還望斧正！