摘要:通常瀏覽器緩存策略分為兩種強(qiáng)緩存和協(xié)商緩存基本原理瀏覽器在加載資源時,根據(jù)請求頭的和判斷是否命中強(qiáng)緩存,如果命中則直接從緩存讀取資源,不會向服務(wù)器發(fā)起請求。并且受限于本地時間,如果修改了本地事件,如果修改了本地時間,可能造成緩存失效。
瀏覽器的緩存機(jī)制
? 在前端開發(fā)中,性能一直是一個非常重要的部分,其中一個非常重要的判斷標(biāo)準(zhǔn)就是一個網(wǎng)頁打開的速度,其中一個提高網(wǎng)頁反應(yīng)速度的非常重要的方式就是利用瀏覽器的緩存機(jī)制,良好的緩存策略可以降低資源的重復(fù)加載提高網(wǎng)頁的整體加載速度,減少請求的延遲,降低網(wǎng)絡(luò)負(fù)荷。
通常瀏覽器緩存策略分為兩種:強(qiáng)緩存和協(xié)商緩存
基本原理瀏覽器在加載資源時,根據(jù)請求頭的Expires 和 cache-control判斷是否命中強(qiáng)緩存,如果命中則直接從緩存讀取資源,不會向服務(wù)器發(fā)起請求。
如果強(qiáng)緩存沒有命中,瀏覽器一定會向服務(wù)器發(fā)起請求,通過last-modefied 和Etag去判斷資源是否命中協(xié)商緩存,如果命中代表資源沒有更新,服務(wù)器會返回304,讀取緩存中的資源,如果沒有命中,則代表資源有更新,服務(wù)器會返回200,從服務(wù)器加載資源。
強(qiáng)緩存和協(xié)商緩存的異同同: 如果兩種緩存方式都未命中,則都需要從服務(wù)端加載資源
異:強(qiáng)緩存命中不會向服務(wù)器發(fā)起請求,協(xié)商緩存需要向服務(wù)器發(fā)起請求
強(qiáng)緩存強(qiáng)緩存通過Expires 和 Cache-Control 兩種響應(yīng)頭實(shí)現(xiàn)。1. Expires
Expires: Wed, 22 Oct 2018 08:41:00 GMT
Expires 出現(xiàn)于 HTTP / 1.0 ,表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 后過期,需要再次請求。并且受限于本地時間,如果修改了本地事件,如果修改了本地時間,可能造成緩存失效。
2. Cache-ControlCache-Control 出現(xiàn)于 HTTP / 1.1,優(yōu)先級高于 Expires ,表示的是相對時間。
Cache-Control: max-age=315360000協(xié)商緩存
協(xié)商緩存是利用的是【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】來管理的。
1. Last-Modefied & If-Modified-SinceLast-Modefied代表服務(wù)器端文件的最后修改時間,當(dāng)瀏覽器發(fā)起請求時,會向服務(wù)端發(fā)送If-modefied-Since報頭,詢問在Last-Modefied之后有沒有被修改過。如果沒有修改過,則返回304使用緩存,如果修改過,則向服務(wù)器請求資源,返回200。
但是如果本地打開緩存文件,會導(dǎo)致Last-Modefied被修改,所以在 HTTP/1.1中引入 Etag.
2. Etag & & If-None-MatchEtag是服務(wù)器自動生成或者由開發(fā)者生成的對應(yīng)資源在服務(wù)器端的唯一標(biāo)識符,能夠更加準(zhǔn)確的控制緩存。當(dāng)發(fā)送請求是If-None-Match會將上次的Etag發(fā)送給服務(wù)器進(jìn)行判斷是否有更新,如果有更新,則會請求新的資源。
ETag的優(yōu)先級比Last-Modified更高
具體為什么要用ETag,主要出于下面幾種情況考慮:
一些文件也許會周期性的更改,但是他的內(nèi)容并不改變(僅僅改變的修改時間),這個時候我們并不希望客戶端認(rèn)為這個文件被修改了,而重新GET;
某些文件修改非常頻繁,比如在秒以下的時間內(nèi)進(jìn)行修改,(比方說1s內(nèi)修改了N次),If-Modified-Since能檢查到的粒度是s級的,這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒);
某些服務(wù)器不能精確的得到文件的最后修改時間。
如何選擇合適的緩存策略大致的順序
Cache-Control —— 請求服務(wù)器之前
Expires —— 請求服務(wù)器之前
If-None-Match (Etag) —— 請求服務(wù)器
If-Modified-Since (Last-Modified) —— 請求服務(wù)器
協(xié)商緩存需要配合強(qiáng)緩存使用,如果不啟用強(qiáng)緩存的話,協(xié)商緩存根本沒有意義
大部分web服務(wù)器都默認(rèn)開啟協(xié)商緩存,而且是同時啟用【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/62136.html
摘要:緩存緩存,也叫網(wǎng)關(guān)緩存反向代理緩存。瀏覽器先向網(wǎng)關(guān)發(fā)起請求,網(wǎng)關(guān)服務(wù)器后面對應(yīng)著一臺或多臺負(fù)載均衡源服務(wù)器,會根據(jù)它們的負(fù)載請求,動態(tài)將請求轉(zhuǎn)發(fā)到合適的源服務(wù)器上。雖然這種架構(gòu)負(fù)載均衡源服務(wù)器之間的緩存沒法共享,但卻擁有更好的處擴(kuò)展性。 一、前言? 工作上遇到一個這樣的需求,一個H5頁面在APP端,如果勾選已讀狀態(tài),則下次打開該鏈接,會跳過此頁面。用到了HTML5 的本地存儲 API ...
摘要:根據(jù)標(biāo)準(zhǔn),到目前為止,一共有種緩存機(jī)制,有些是之前已有,有些是才新加入的。首次請求緩存有效期內(nèi)請求緩存過期后請求一般瀏覽器會將緩存記錄及緩存文件存在本地文件夾中。 騰訊 Bugly 特約作者:賀輝超 1. H5 緩存機(jī)制介紹 H5,即 HTML5,是新一代的 HTML 標(biāo)準(zhǔn),加入很多新的特性。離線存儲(也可稱為緩存機(jī)制)是其中一個非常重要的特性。H5 引入的離線存儲,這意味著 web ...
摘要:對于瀏覽器緩存,相信很多開發(fā)者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說,瀏覽器緩存就是把一個已經(jīng)請求過的資源如頁面,圖片,,數(shù)據(jù)等拷貝一份副本儲存在瀏覽器中。 對于瀏覽器緩存,相信很多開發(fā)者對它真的是又愛又恨。一方面極大地提升了用戶體驗(yàn),而另一方面有時會因?yàn)樽x取了緩存而展示了錯誤的東西,而在開發(fā)過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...
摘要:對于瀏覽器緩存,相信很多開發(fā)者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說,瀏覽器緩存就是把一個已經(jīng)請求過的資源如頁面,圖片,,數(shù)據(jù)等拷貝一份副本儲存在瀏覽器中。 對于瀏覽器緩存,相信很多開發(fā)者對它真的是又愛又恨。一方面極大地提升了用戶體驗(yàn),而另一方面有時會因?yàn)樽x取了緩存而展示了錯誤的東西,而在開發(fā)過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...
摘要:從瀏覽器角度來看,整個就是一個源服務(wù)器,從這個層面來說,瀏覽器和服務(wù)器之間的緩存機(jī)制,在這種架構(gòu)下同樣適用。如果命中,則返回,告訴瀏覽器資源未更新,可使用本地的緩存。 緩存類型 緩存在宏觀上可以分成兩類:私有緩存和共享緩存。共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的,各級代理不能緩存的緩存。 微觀上可以分下面幾類: 瀏覽器緩存 緩存存在的意義就是當(dāng)用戶點(diǎn)擊back按...
閱讀 2826·2021-11-24 09:39
閱讀 3397·2021-11-19 09:40
閱讀 2265·2021-11-17 09:33
閱讀 3756·2021-10-08 10:04
閱讀 3047·2021-09-26 09:55
閱讀 1672·2021-09-22 15:26
閱讀 934·2021-09-10 10:51
閱讀 3135·2019-08-30 15:44