瀏覽器緩存機(jī)制學(xué)習(xí)總結(jié)
最近在做一個(gè)考試系統(tǒng)時(shí),由于經(jīng)常加載試卷或圖片等等靜態(tài)資源,抽空學(xué)習(xí)了一下緩存機(jī)制,在此記錄
為什么要使用緩存1、通過(guò)HTTP協(xié)議,在客戶端和瀏覽器建立連接時(shí)需要消耗時(shí)間,而大的響應(yīng)需要在客戶端和服務(wù)器之間進(jìn)行多次往返通信才能獲得完整的響應(yīng),這拖延了瀏覽器可以使用和處理內(nèi)容的時(shí)間。這就增加了訪問(wèn)服務(wù)器的數(shù)據(jù)和資源的成本,因此利用瀏覽器的緩存機(jī)制重用以前獲取的數(shù)據(jù)就變成了性能優(yōu)化時(shí)需要考慮的事情。
2、流量啊,現(xiàn)在云服務(wù)器流量都是收費(fèi)的(- -玩笑)
一般使用中,緩存策略都是通過(guò)http 請(qǐng)求或響應(yīng)里的header字段定義的,且許多是搭配使用的
各個(gè)字段定義詳見(jiàn) http 緩存 MDN
常用的字段個(gè)人看來(lái)主要分為兩個(gè)部分
緩存策略字段
緩存校驗(yàn)字段
接下來(lái)依次介紹
緩存策略字段Pragma:no-cache可以禁用瀏覽器緩存,使得瀏覽器每次都會(huì)發(fā)起新請(qǐng)求去獲取資源
Pragma的優(yōu)先級(jí)比expires高,如果給Pragma:no-cache且給expires一個(gè)未過(guò)期的事件,瀏覽器仍會(huì)發(fā)起新請(qǐng)求
expires時(shí)服務(wù)端的時(shí)間,與客戶端時(shí)間可能不一致哦
http1.1新增加的cache-control字段來(lái)彌補(bǔ)Pragma的不足,來(lái)對(duì)緩存策略提供更細(xì)粒度的控制,可以定義的值如下
request header 請(qǐng)求頭header可以定義的值:
response header 相應(yīng)header可以定義的值:
對(duì)幾個(gè)字段加以解釋
cache-control:no-cache ,強(qiáng)制瀏覽器不直接使用緩存,每次需要向服務(wù)器發(fā)起請(qǐng)求校驗(yàn)緩存有效性
cache-control:max-age=1000 ,1000秒內(nèi),該資源有效,瀏覽器無(wú)需再次請(qǐng)求獲取資源(response 200 from cache)
cache-control:public ,可以被任何中間人(比如中間代理、CDN等)緩存。
cache-control:private,該響應(yīng)是專用于某單個(gè)用戶的,中間人不能緩存此響應(yīng)
cache-control優(yōu)先級(jí)高于expirse
對(duì)緩存策略進(jìn)行簡(jiǎn)單總結(jié)就是:
不會(huì)發(fā)起請(qǐng)求的場(chǎng)景:
cache-control:max-age在有效期內(nèi)
當(dāng)前客戶端時(shí)間未超過(guò)expirse
需要發(fā)起請(qǐng)求驗(yàn)證緩存是否有效的場(chǎng)景(需要配合if-modified-since || if-none-match),返回304可以在緩存取值:
cache-control:no-cache
cache-control:max-age超出有效期
當(dāng)前客戶端時(shí)間超過(guò)expirse
必須發(fā)起請(qǐng)求獲取新資源的場(chǎng)景:
cache-control:no-store
緩存校驗(yàn)字段 last-modifed,e-tag last-modified該字段定義了資源上次的修改時(shí)間
場(chǎng)景:(cache-control:no-cache)
當(dāng)客戶端請(qǐng)求相應(yīng)資源時(shí),服務(wù)端會(huì)返回last-modified字段
客戶端再次請(qǐng)求相應(yīng)資源時(shí)會(huì)帶上if-modified-since:(last-modified)value,
如果資源未改動(dòng)(資源的last-modified <=if-modified-since)則返回304,
如資源已更新,返回新資源(200),同時(shí)更新last-modified的值
如果是cache-control:max-age=?,請(qǐng)求之前還會(huì)判斷有效期(可能就無(wú)需請(qǐng)求了,直接從瀏覽器緩存獲取)
e-tage-tag是服務(wù)端對(duì)某個(gè)資源計(jì)算出來(lái)的唯一指紋值,如果資源有改動(dòng),計(jì)算出來(lái)的指紋值會(huì)變化。
客戶端請(qǐng)求時(shí)會(huì)帶上之前服務(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每次都會(huì)更新而導(dǎo)致重復(fù)返回資源,
而e-tag值不會(huì)變因?yàn)閮?nèi)容不變,所以e-tag在這種場(chǎng)景下高效利用了緩存。
如果服務(wù)端相應(yīng)同時(shí)具有l(wèi)ast-modified和e-tag,那么下次請(qǐng)求時(shí)會(huì)帶上兩者
if-none-match: e-tag;
if-modified-since: (last-modified)value
且這兩者同時(shí)滿足才會(huì)返回304,否則返回200。
實(shí)例找個(gè)網(wǎng)站請(qǐng)求實(shí)例看一下字段我們都理解了沒(méi)
如圖這里的這個(gè)js資源是直接從http緩存直接加載的,肯定是上次請(qǐng)求的時(shí)間與現(xiàn)在相比沒(méi)超過(guò)max-age。
現(xiàn)在看這張圖應(yīng)該有點(diǎn)清晰了,這篇作為個(gè)人學(xué)習(xí)總結(jié),許多細(xì)節(jié)不夠詳盡,實(shí)例操作不夠,推薦各位去更加詳盡參考資料中細(xì)細(xì)品讀。
通過(guò)瀏覽器看緩存
web性能優(yōu)化:詳說(shuō)瀏覽器緩存
淺談瀏覽器http的緩存機(jī)制
MDN
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52422.html
摘要:瀏覽器緩存根據(jù)一套與服務(wù)器約定的規(guī)則進(jìn)行工作檢查確定副本是否最新,通常只要一次會(huì)話。數(shù)據(jù)庫(kù)緩存是一類特殊的緩存,是數(shù)據(jù)庫(kù)自身的緩存機(jī)制。存儲(chǔ)成本當(dāng),系統(tǒng)會(huì)從數(shù)據(jù)庫(kù)或者其他數(shù)據(jù)源取出數(shù)據(jù),然后放入存儲(chǔ),這個(gè)過(guò)程需要時(shí)間和空間,這就是緩存成本。 什么是緩存 存儲(chǔ)在計(jì)算機(jī)上的一個(gè)原始數(shù)據(jù)復(fù)制集,以便于訪問(wèn)。 --維基百科 緩存是系統(tǒng)快速響應(yīng)中的一種關(guān)鍵技術(shù),是一組被保存起來(lái)以備將來(lái)使用的...
摘要:巧前端基礎(chǔ)進(jìn)階全方位解讀前端掘金我們?cè)趯W(xué)習(xí)的過(guò)程中,由于對(duì)一些概念理解得不是很清楚,但是又想要通過(guò)一些方式把它記下來(lái),于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結(jié)論。 計(jì)算機(jī)程序的思維邏輯 (83) - 并發(fā)總結(jié) - 掘金從65節(jié)到82節(jié),我們用了18篇文章討論并發(fā),本節(jié)進(jìn)行簡(jiǎn)要總結(jié)。 多線程開發(fā)有兩個(gè)核心問(wèn)題,一個(gè)是競(jìng)爭(zhēng),另一個(gè)是協(xié)作。競(jìng)爭(zhēng)會(huì)出現(xiàn)線程安全問(wèn)題,所以,本...
摘要:巧前端基礎(chǔ)進(jìn)階全方位解讀前端掘金我們?cè)趯W(xué)習(xí)的過(guò)程中,由于對(duì)一些概念理解得不是很清楚,但是又想要通過(guò)一些方式把它記下來(lái),于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結(jié)論。 計(jì)算機(jī)程序的思維邏輯 (83) - 并發(fā)總結(jié) - 掘金從65節(jié)到82節(jié),我們用了18篇文章討論并發(fā),本節(jié)進(jìn)行簡(jiǎn)要總結(jié)。 多線程開發(fā)有兩個(gè)核心問(wèn)題,一個(gè)是競(jìng)爭(zhēng),另一個(gè)是協(xié)作。競(jìng)爭(zhēng)會(huì)出現(xiàn)線程安全問(wèn)題,所以,本...
摘要:基礎(chǔ)問(wèn)題的的性能及原理之區(qū)別詳解備忘筆記深入理解流水線抽象關(guān)鍵字修飾符知識(shí)點(diǎn)總結(jié)必看篇中的關(guān)鍵字解析回調(diào)機(jī)制解讀抽象類與三大特征時(shí)間和時(shí)間戳的相互轉(zhuǎn)換為什么要使用內(nèi)部類對(duì)象鎖和類鎖的區(qū)別,,優(yōu)缺點(diǎn)及比較提高篇八詳解內(nèi)部類單例模式和 Java基礎(chǔ)問(wèn)題 String的+的性能及原理 java之yield(),sleep(),wait()區(qū)別詳解-備忘筆記 深入理解Java Stream流水...
閱讀 796·2021-11-24 09:38
閱讀 998·2021-11-11 11:01
閱讀 3236·2021-10-19 13:22
閱讀 1524·2021-09-22 15:23
閱讀 2828·2021-09-08 09:35
閱讀 2766·2019-08-29 11:31
閱讀 2119·2019-08-26 11:47
閱讀 1563·2019-08-26 11:44