瀏覽器緩存機(jī)制學(xué)習(xí)總結(jié)

JiaXinYi 發(fā)布于2019-08-02 10:32 / 945人閱讀

瀏覽器緩存機(jī)制學(xué)習(xí)總結(jié)

最近在做一個考試系統(tǒng)時，由于經(jīng)常加載試卷或圖片等等靜態(tài)資源，抽空學(xué)習(xí)了一下緩存機(jī)制，在此記錄

為什么要使用緩存

1、通過HTTP協(xié)議，在客戶端和瀏覽器建立連接時需要消耗時間，而大的響應(yīng)需要在客戶端和服務(wù)器之間進(jìn)行多次往返通信才能獲得完整的響應(yīng)，這拖延了瀏覽器可以使用和處理內(nèi)容的時間。這就增加了訪問服務(wù)器的數(shù)據(jù)和資源的成本，因此利用瀏覽器的緩存機(jī)制重用以前獲取的數(shù)據(jù)就變成了性能優(yōu)化時需要考慮的事情。
2、流量啊，現(xiàn)在云服務(wù)器流量都是收費(fèi)的（- -玩笑）

瀏覽器緩存機(jī)制簡介

一般使用中，緩存策略都是通過http 請求或響應(yīng)里的header字段定義的，且許多是搭配使用的
各個字段定義詳見 http 緩存 MDN

常用的字段個人看來主要分為兩個部分

緩存策略字段

緩存校驗(yàn)字段

接下來依次介紹

緩存策略字段

Pragma（http1.0）,cache-control（http1.1）

Pragma

Pragma：no-cache可以禁用瀏覽器緩存，使得瀏覽器每次都會發(fā)起新請求去獲取資源
Pragma的優(yōu)先級比expires高，如果給Pragma：no-cache且給expires一個未過期的事件，瀏覽器仍會發(fā)起新請求
expires時服務(wù)端的時間，與客戶端時間可能不一致哦

cache-control（重點(diǎn)）

http1.1新增加的cache-control字段來彌補(bǔ)Pragma的不足，來對緩存策略提供更細(xì)粒度的控制，可以定義的值如下
request header 請求頭header可以定義的值：

response header 相應(yīng)header可以定義的值：

對幾個字段加以解釋

cache-control：no-cache ，強(qiáng)制瀏覽器不直接使用緩存，每次需要向服務(wù)器發(fā)起請求校驗(yàn)緩存有效性

cache-control：max-age=1000 ，1000秒內(nèi)，該資源有效，瀏覽器無需再次請求獲取資源（response 200 from cache）

cache-control：public ，可以被任何中間人（比如中間代理、CDN等）緩存。

cache-control：private，該響應(yīng)是專用于某單個用戶的，中間人不能緩存此響應(yīng)

cache-control優(yōu)先級高于expirse

對緩存策略進(jìn)行簡單總結(jié)就是：
不會發(fā)起請求的場景：

cache-control：max-age在有效期內(nèi)

當(dāng)前客戶端時間未超過expirse

需要發(fā)起請求驗(yàn)證緩存是否有效的場景（需要配合if-modified-since || if-none-match），返回304可以在緩存取值：

cache-control：no-cache

cache-control：max-age超出有效期

當(dāng)前客戶端時間超過expirse

必須發(fā)起請求獲取新資源的場景：

cache-control：no-store

緩存校驗(yàn)字段 last-modifed,e-tag last-modified

該字段定義了資源上次的修改時間
場景：（cache-control:no-cache）
當(dāng)客戶端請求相應(yīng)資源時，服務(wù)端會返回last-modified字段
客戶端再次請求相應(yīng)資源時會帶上if-modified-since:(last-modified)value，
如果資源未改動（資源的last-modified <=if-modified-since）則返回304，
如資源已更新，返回新資源（200），同時更新last-modified的值

如果是cache-control:max-age=?,請求之前還會判斷有效期(可能就無需請求了，直接從瀏覽器緩存獲取)

e-tag

e-tag是服務(wù)端對某個資源計(jì)算出來的唯一指紋值，如果資源有改動，計(jì)算出來的指紋值會變化。
客戶端請求時會帶上之前服務(wù)端返回的 if-none-match:e-tag，服務(wù)端以指紋值是否相等為依據(jù)判斷客戶端的緩存是否有效。
如有效，返回304，如失效，返回200和新資源

e-tag的出現(xiàn)是彌補(bǔ)last-modified的不足

last-modifie只能精確到秒，如一秒內(nèi)多次更新，則不能獲取最新資源

如果某資源是定期更新的但內(nèi)容卻可能未改變，

則last-modified每次都會更新而導(dǎo)致重復(fù)返回資源，
而e-tag值不會變因?yàn)閮?nèi)容不變，所以e-tag在這種場景下高效利用了緩存。

注意

如果服務(wù)端相應(yīng)同時具有l(wèi)ast-modified和e-tag，那么下次請求時會帶上兩者

if-none-match： e-tag；

if-modified-since：（last-modified）value

且這兩者同時滿足才會返回304，否則返回200。

實(shí)例

找個網(wǎng)站請求實(shí)例看一下字段我們都理解了沒

如圖這里的這個js資源是直接從http緩存直接加載的，肯定是上次請求的時間與現(xiàn)在相比沒超過max-age。

寫在最后

現(xiàn)在看這張圖應(yīng)該有點(diǎn)清晰了，這篇作為個人學(xué)習(xí)總結(jié)，許多細(xì)節(jié)不夠詳盡，實(shí)例操作不夠，推薦各位去更加詳盡參考資料中細(xì)細(xì)品讀。

Reference

通過瀏覽器看緩存

web性能優(yōu)化:詳說瀏覽器緩存

淺談瀏覽器http的緩存機(jī)制

MDN

GPU云服務(wù)器云服務(wù)器 php緩存技術(shù)總結(jié) 三級緩存機(jī)制 cdn緩存機(jī)制 php緩存機(jī)制

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/52422.html

發(fā)表評論

登陸后可評論

0條評論

JiaXinYi

男|高級講師

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

TA的文章

十年老Python程序員：給我一個鏈接，沒有我不能爬的視頻，只有我頂不住的視頻

閱讀 851·2021-11-24 09:38
快云科技：香港CN2年付5折特惠，2核2G/20Mbps，低至388元/年

閱讀 1058·2021-11-11 11:01
格局大變？阿里發(fā)布自研 CPU 倚天710、通用服務(wù)器，挑戰(zhàn)浪潮、新華三、華為？

閱讀 3321·2021-10-19 13:22
云主機(jī)有什么作用-云主機(jī)到底有什么作用？

閱讀 1595·2021-09-22 15:23
FastAdmin 簡介

閱讀 2913·2021-09-08 09:35
幾行代碼輕松實(shí)現(xiàn)瀑布流顯示。

閱讀 2826·2019-08-29 11:31
JS-實(shí)現(xiàn)入棧出棧

閱讀 2190·2019-08-26 11:47
愛搞事情的webpack

閱讀 1624·2019-08-26 11:44

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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