從前端角度理解緩存

Astrian 發(fā)布于2019-08-23 14:47 / 1252人閱讀

摘要：緩存的概念分很多種，本次討論的主要就是前端緩存中的緩存。從字面理解，強(qiáng)制緩存的方式簡單粗暴，給設(shè)置了過期時間，超過這個時間之后過期需要重新請求。這個方法簡單直接，直接設(shè)定一個絕對的時間當(dāng)前時間緩存時間。然后從緩存中讀取數(shù)據(jù)。

緩存的概念分很多種，本次討論的主要就是前端緩存中的Http緩存。

緩存是怎么回事

前端發(fā)送請求主要經(jīng)歷以下三個過程，請求->處理->響應(yīng)。
如果有多次請求就需要重復(fù)執(zhí)行這個過程。

重復(fù)請求的過程

以下是一個重復(fù)請求的流程圖：

從以上的流程圖可以看書，如果用戶重復(fù)請求同一資源的話，會對服務(wù)器資源造成浪費(fèi)，服務(wù)器重復(fù)讀取資源，發(fā)送給瀏覽器后瀏覽器重復(fù)下載，造成不必要的等待與消耗。

緩存讀取的過程

緩存讀取就是瀏覽器在向服務(wù)器請求資源之前，先查詢一下本地緩存中是否存在需要的資源，如果存在，那便優(yōu)先從緩存中讀取。當(dāng)緩存不存在或者過期，再向服務(wù)器發(fā)送請求。

如何開啟Http緩存并對緩存進(jìn)行設(shè)置，是本次討論的關(guān)鍵。

緩存的類型

瀏覽器有如下常見的幾個字段：

expires: 設(shè)置緩存過期的時間

private: 客戶端可以緩存

public: 客戶端和代理服務(wù)器都可緩存

max-age=xxx: 緩存的內(nèi)容將在 xxx 秒后失效

no-cache: 需要使用對比緩存來驗(yàn)證緩存數(shù)據(jù)

no-store: 所有內(nèi)容都不會緩存，強(qiáng)制緩存，對比緩存都不會觸發(fā)

last-modified: 內(nèi)容上次被修改的時間

Etag: 文件的特殊標(biāo)識

強(qiáng)制緩存和協(xié)商緩存

緩存方法可以分為強(qiáng)制緩存與協(xié)商緩存。

從字面理解，強(qiáng)制緩存的方式簡單粗暴，給cache設(shè)置了過期時間，超過這個時間之后cache過期需要重新請求。上述字段中的expires與cache-control中的max-age都屬于強(qiáng)制緩存。

協(xié)商緩存根據(jù)一系列條件來判斷是否可以使用緩存。

強(qiáng)制緩存優(yōu)先級高于協(xié)商緩存

強(qiáng)制緩存 expires

expires給瀏覽器設(shè)置了一個絕對時間，當(dāng)瀏覽器時間超過這個絕對時間之后，重新向服務(wù)器發(fā)送請求。

Expires: Fri, 04 Jan 2019 12:00:00 GMT

這個方法簡單直接，直接設(shè)定一個絕對的時間 (當(dāng)前時間+緩存時間)。但是也存在隱患，例如瀏覽器當(dāng)前時間是可以進(jìn)行更改的，更改之后expires設(shè)置的絕對時間相對不準(zhǔn)確，cache可能會出現(xiàn)長久不過期或者很快就過期的情況。

cache-control: max-age

為了解決expires存在的問題，Http1.1版本中提出了cache-control: max-age，該字段與expires的緩存思路相同，都是設(shè)置了一個過期時間，不同的是max-age設(shè)置的是相對緩存時間開始往后多久，因此不存在受日期不準(zhǔn)確情況的影響。

但是強(qiáng)制緩存存在一個問題，該緩存方式優(yōu)先級高，如果在過期時間內(nèi)緩存的資源在服務(wù)器上更新了，客服端不能及時獲取最新的資源。

協(xié)商緩存

協(xié)商緩存解決了無法及時獲取更新資源的問題。以下兩組字段，都可以對資源做標(biāo)識，由服務(wù)器做分析，如果未進(jìn)行更新，那返回304狀態(tài)碼，從緩存中讀取資源，否則重新請求資源。

last-modify

last-modify告知了客戶端上次修改該資源的時間，

Last-Modified: Wed, 02 Jan 2019 03:06:03 GMT

瀏覽器將這個值記錄在if-modify-since中(瀏覽器自動記錄了該字段信息)，下一次請求相同資源時，與服務(wù)器返回的last-modify進(jìn)行比對，如果相等，則表示未修改，響應(yīng) 304；反之，則表示修改了，響應(yīng) 200 狀態(tài)碼，并返回數(shù)據(jù)。

last-modify以秒為單位進(jìn)行更新，如果小于該單位高頻進(jìn)行更新的話，不適合采用該方法。

ETag

ETag是對資源的特殊標(biāo)識

Etag: W/"e563df87b65299122770e0a84ada084f"

請求該資源成功之后，將返回的ETag存入if-none-match字段中(瀏覽器自動記錄了該字段信息)，同樣在請求資源時傳遞給服務(wù)器，服務(wù)器查詢該編碼對應(yīng)的資源有無更新，無更新返回304狀態(tài)，更新返回200并重新請求。

以下有個小例子，查詢書籍更新：

當(dāng)書籍信息查詢之后，再次查詢，服務(wù)器根據(jù)資源的ETag查詢得知該資源沒有進(jìn)行更新，返回304狀態(tài)碼。

更新返回的數(shù)據(jù)信息，再次查詢，返回200狀態(tài)碼，重新進(jìn)行請求：

從返回的Request Headers可以看出，再次請求時，瀏覽器自動發(fā)送了If-Modified-Since與If-None-Match兩個字段，瀏覽器根據(jù)這兩個字段中（If-None-Match 優(yōu)先級大于 If-Modified-Since）來判斷是否修改了資源。

ETag如何計算

ETag是針對某個文件的特殊標(biāo)識，服務(wù)器默認(rèn)采用SHA256算法生成。也可以采用其他方式，保證編碼的唯一性即可。

緩存的優(yōu)先級

根據(jù)上文優(yōu)缺點(diǎn)的比對，可以得出以下的優(yōu)先級順序：

Cache-Control > Expires > ETag > Last-Modified

如果資源需要用到強(qiáng)制緩存，Cache-Control相對更加安全，協(xié)商緩存中利用ETag查詢更新更加全面。

圖片來源:瀏覽器緩存機(jī)制詳解

緩存存儲在哪 disk cache

disk cache為存儲在硬盤中的緩存，存儲在硬盤中的資源相對穩(wěn)定，不會隨著tab或?yàn)g覽器的關(guān)閉而消失，可以用來存儲大型的，需長久使用的資源。

當(dāng)硬盤中的資源被加載時，內(nèi)存中也存儲了該資源，當(dāng)下次改資源被調(diào)用時，會優(yōu)先從memory cache中讀取，加快資源的獲取。

memory cache

memory cache即存儲在內(nèi)存中的緩存，內(nèi)存中的內(nèi)容會隨著tab的關(guān)閉而釋放。

當(dāng)接口狀態(tài)返回304時，資源默認(rèn)存儲在memory cache中，當(dāng)頁面關(guān)閉后，重新打開需要再次請求。

這兩種存儲方式的區(qū)別可以參考該回答

When you visit a URL in Chrome, the HTML and the other assets(like images) on the page are stored locally in a memory and a disk cache. Chrome will use the memory cache first because it is much faster, but it will also store the page in a disk cache in case you quit your browser or it crashes, because the disk cache is persistent.

當(dāng)您訪問chrome中的URL時，頁面上的HTML和其他資產(chǎn)（如圖像）將本地存儲在內(nèi)存和磁盤緩存中。Chrome將首先使用內(nèi)存緩存，因?yàn)樗乃俣瓤斓枚?，但它也會將頁面存儲在磁盤緩存中，以防您退出瀏覽器或它崩潰，因?yàn)榇疟P緩存是持久的。

為什么有的資源一會from disk cache，一會from memory cache

三級緩存原理

先去內(nèi)存看，如果有，直接加載

如果內(nèi)存沒有，擇取硬盤獲取，如果有直接加載

如果硬盤也沒有，那么就進(jìn)行網(wǎng)絡(luò)請求

加載到的資源緩存到硬盤和內(nèi)存，下次請求可以快速從內(nèi)存中獲取到

為什么有的請求狀態(tài)碼返回200，有的返回304 200 from memory cache

不訪問服務(wù)器，直接讀緩存，從內(nèi)存中讀取緩存。此時的數(shù)據(jù)時緩存到內(nèi)存中的，當(dāng)關(guān)閉進(jìn)程后，也就是瀏覽器關(guān)閉以后，數(shù)據(jù)將不存在。

但是這種方式只能緩存派生資源。

200 from disk cache

不訪問服務(wù)器，直接讀緩存，從磁盤中讀取緩存，當(dāng)關(guān)閉進(jìn)程時，數(shù)據(jù)還是存在。

這種方式也只能緩存派生資源

304 Not Modified

訪問服務(wù)器，發(fā)現(xiàn)數(shù)據(jù)沒有
更新，服務(wù)器返回此狀態(tài)碼。然后從緩存中讀取數(shù)據(jù)。

薄荷應(yīng)用

舉一個簡單的小

GPU云服務(wù)器云服務(wù)器云計算三種服務(wù)從服務(wù)方式的角度可以把云計算分為( )類怎么理解前端工程師前端從入門到精通任意角度

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101150.html

發(fā)表評論

登陸后可評論

0條評論

Astrian

男|高級講師

我要關(guān)注我要私信

TA的文章

Python基礎(chǔ)之輸入、輸出與高階賦值

閱讀 1961·2021-11-23 09:51
軟件需求工程十個題測試

閱讀 873·2021-11-19 09:40
如何保護(hù)您不了解的數(shù)據(jù)資產(chǎn)免受網(wǎng)絡(luò)攻擊?

閱讀 830·2021-10-27 14:20
寶塔面板，升級默認(rèn)python2.7為python3.X，并共存！

閱讀 5004·2021-10-09 09:52
曲鳥全棧UI自動化教學(xué)(二)：環(huán)境搭建與第一個Selenium腳本

閱讀 3297·2021-10-09 09:44
程序員的之路。瀏覽器新標(biāo)簽頁

閱讀 1729·2021-10-08 10:05
Authy – 二次密碼保護(hù)驗(yàn)證必備軟件工具（親測Authy下載和使用）

閱讀 5054·2021-09-09 11:47
[譯] CSS 載入機(jī)制的未來趨勢

閱讀 3481·2019-08-30 12:47

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！