web中http緩存的示例分析

這篇文章主要為大家展示了“web中http緩存的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“web中http緩存的示例分析”這篇文章吧。

為什么要有http緩存?

1.當(dāng)輸入網(wǎng)址到加載出頁(yè)面, 電腦會(huì)經(jīng)過"CPU計(jì)算、網(wǎng)絡(luò)請(qǐng)求、頁(yè)面渲染"等一系列步驟;

2.“網(wǎng)絡(luò)請(qǐng)求"是其中最不確定、最耗時(shí)的一個(gè)環(huán)節(jié), 針對(duì)這個(gè)環(huán)節(jié), 我們可以通過"減少網(wǎng)絡(luò)請(qǐng)求的體積和數(shù)量”, 來(lái)更快加載出頁(yè)面, 這是"緩存"存在的原因;

3.通過"緩存"可以實(shí)現(xiàn)"減少網(wǎng)絡(luò)請(qǐng)求的體積和數(shù)量";

http緩存之 強(qiáng)制緩存

1.當(dāng)?shù)谝淮卧L問某個(gè)網(wǎng)站, 該網(wǎng)站后端如果認(rèn)為請(qǐng)求的資源(css、js、圖片等)應(yīng)該被瀏覽器緩存下來(lái)

2.后端會(huì)在響應(yīng)頭中添加一個(gè)配置:

Cache-Control: max-age=12146545(單位:秒)

3.當(dāng)我們?cè)俅握?qǐng)求該網(wǎng)站時(shí), 會(huì)直接從本地緩存讀取資源, 不會(huì)向服務(wù)器請(qǐng)求緩存的資源

4.如果緩存資源過期了, 會(huì)從服務(wù)端請(qǐng)求所有資源, 并再次緩存加了配置項(xiàng)的資源

5.Cache-Control 的設(shè)置, 由后端開發(fā)決定, 不涉及前端, 當(dāng)然也可以設(shè)置成不緩存: Cache-Control: no-cache

http緩存之 協(xié)商緩存(對(duì)比緩存)

1.協(xié)商緩存是服務(wù)端的一種緩存策略;

2.當(dāng)?shù)谝淮卧L問某個(gè)網(wǎng)站, 發(fā)送請(qǐng)求時(shí), 服務(wù)器會(huì)返回資源和資源標(biāo)識(shí). 瀏覽器會(huì)把資源和資源標(biāo)識(shí)都緩存下來(lái);

3.當(dāng)再次發(fā)送請(qǐng)求時(shí), 會(huì)帶上資源標(biāo)識(shí), 服務(wù)器會(huì)把請(qǐng)求中的資源標(biāo)識(shí), 和服務(wù)器中的最新資源標(biāo)識(shí), 作對(duì)比:

• 如果一致: 服務(wù)器只返回304, 瀏覽器會(huì)在緩存中直接獲取資源(減少請(qǐng)求數(shù)據(jù)的體積);

• 如果不一致: 服務(wù)器會(huì)返回200和 請(qǐng)求的資源 及 最新資源標(biāo)識(shí) (體積會(huì)相對(duì)大一些)

協(xié)商緩存中的資源標(biāo)識(shí)

資源標(biāo)識(shí)有兩種, 發(fā)送請(qǐng)求時(shí), 都是放在請(qǐng)求頭中:

Last-Modified : 資源上一次修改的時(shí)間

If-Modified-Since: xxxxx (鍵名和Last-Modified不一樣)

ETag : 資源對(duì)象的唯一字符串

If-None-Match: xxxx(鍵名和Last-Modified不一樣)

優(yōu)先級(jí)的問題

一般來(lái)說會(huì)優(yōu)先使用 ETag , 因?yàn)?Last-Modified 的值只精確到 秒級(jí)

文件如果每隔一段時(shí)間都重復(fù)生成，但內(nèi)容相同。

 Last-Modified 會(huì)每次返回資源文件，即便內(nèi)容相同。
但是Etag可以判斷出文件內(nèi)容相同，就會(huì)返回304，使用緩存

以上是“web中http緩存的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！