資訊專(zhuān)欄INFORMATION COLUMN
摘要：原文鏈接關(guān)于瀏覽器緩存我知道多少歡迎在前端開(kāi)發(fā)中，我們?cè)谔岬叫阅軆?yōu)化的時(shí)候總會(huì)提到一點(diǎn)合理設(shè)置緩存。如果相等，則說(shuō)明資源未修改，返回，瀏覽器使用本地緩存。
原文鏈接：關(guān)于瀏覽器緩存我知道多少
歡迎star~
在前端開(kāi)發(fā)中，我們?cè)谔岬叫阅軆?yōu)化的時(shí)候總會(huì)提到一點(diǎn)：合理設(shè)置緩存。我們?cè)撊绾螐倪@方面入手來(lái)考慮提高網(wǎng)站性能呢？
前言我們都知道 HTML5 引入了應(yīng)用程序緩存，可以在沒(méi)有網(wǎng)絡(luò)的情況下進(jìn)行訪問(wèn)，同時(shí)，HTML5 還引入了 storage 本地存儲(chǔ)。這些都屬于應(yīng)用緩存。
本篇文章主要內(nèi)容是和瀏覽器緩存相關(guān)的，也可以說(shuō)是 HTTP 緩存。
什么是瀏覽器緩存MDN 上是這樣解釋瀏覽器緩存的：
A browser cache holds all document downloaded via HTTP by the user 。。。 without requiring an additional trip to the server.
意思就是，瀏覽器緩存保存著用戶通過(guò) HTTP 獲取的所有資源，再下一次請(qǐng)求時(shí)可以避免重復(fù)向服務(wù)器發(fā)出多余的請(qǐng)求。
通俗的說(shuō)，就是在你訪問(wèn)過(guò)一次某個(gè)網(wǎng)站之后，這個(gè)站點(diǎn)的文字、圖片等所有資源都被下載到本地了，下次再訪問(wèn)該網(wǎng)站時(shí)判斷是否滿足緩存條件，如果滿足就不用再花費(fèi)時(shí)間去等待資源的獲取了。
瀏覽器緩存的分類(lèi)一般來(lái)說(shuō)瀏覽器緩存可以分為兩類(lèi)：
強(qiáng)緩存
協(xié)商緩存（對(duì)比緩存）
我們需要知道的是，瀏覽器在加載資源時(shí)，會(huì)先判斷是否命中強(qiáng)緩存再驗(yàn)證是命中協(xié)商緩存。
其它的的具體細(xì)節(jié)，稍后會(huì)展開(kāi)來(lái)說(shuō)。
強(qiáng)緩存瀏覽器在加載資源時(shí)，會(huì)先根據(jù)本地緩存資源的 header 中的信息判斷是否命中強(qiáng)緩存，如果命中則直接使用緩存中的資源不會(huì)再向服務(wù)器發(fā)送請(qǐng)求。
從圖中可以看出，強(qiáng)緩存一般是這樣一個(gè)流程：
查看 header 頭中的 Expire 和 Cache-control 來(lái)判斷是否滿足規(guī)則；
如果滿足規(guī)則，就返回緩存的數(shù)據(jù)；
如果不滿足規(guī)則，就向服務(wù)器發(fā)送請(qǐng)求；
服務(wù)器返回?cái)?shù)據(jù)；
將新數(shù)據(jù)存入緩存。
所以我們主要就是關(guān)注 Expire 和 Cache-control 這兩個(gè)字段。
Expire同樣地，我們看看MDN中如何解釋這個(gè)字段：
The Expires header contains the date/time after which the response is considered stale.
這個(gè)字段包含了一個(gè)時(shí)間，過(guò)了這個(gè)時(shí)間，響應(yīng)將會(huì)失效。
也就是說(shuō)，Expire 這個(gè)字段表示緩存到期時(shí)間，我們來(lái)打開(kāi)一個(gè)網(wǎng)站并查看 Response Header 看看這個(gè)字段：
Expires:Fri, 27 Oct 2017 07:55:30 GMT
可能在你查看這的時(shí)候發(fā)現(xiàn)時(shí)間不對(duì)啊，怎么都已經(jīng)是過(guò)去了 ~
GMT 表示的是格林威治時(shí)間，和北京時(shí)間相差8小時(shí)。
上面的這個(gè)時(shí)間表示的是 2017年10月27日15:55:30。
通過(guò)設(shè)置 Expire 來(lái)設(shè)置緩存有一個(gè)致命缺點(diǎn)：
可以看出，這個(gè)是個(gè)絕對(duì)時(shí)間，也就是說(shuō)，如果我修改了客戶端的本地時(shí)間，是不是就會(huì)導(dǎo)致判斷緩存失效了呢。
Cache-Control既然不能設(shè)置絕對(duì)時(shí)間，那我就設(shè)置個(gè)相對(duì)時(shí)間唄。
在 HTTP/1.1 中，增加了一個(gè)字段 Cache-Control ，它包含一個(gè) max-age 屬性，該字段表示資源緩存的最大有效時(shí)間，這就是一個(gè)相對(duì)時(shí)間。
Cache-Control:max-age=600
這個(gè)表示的就是最大有效時(shí)間是 600s ，對(duì)的，它的單位是秒。
Cache-Control 除了 max-age 屬性之外還有一些屬性：
no-cache：需要進(jìn)行協(xié)商緩存，發(fā)送請(qǐng)求到服務(wù)器確認(rèn)是否使用緩存。
no-store：禁止使用緩存，每一次都要重新請(qǐng)求數(shù)據(jù)。
public：默認(rèn)設(shè)置。
private：不能被多用戶共享。
現(xiàn)在基本上都會(huì)同時(shí)設(shè)置 Expire 和 Cache-Control ，Cache-Control 的優(yōu)先級(jí)別更高。
協(xié)商緩存當(dāng)強(qiáng)緩存沒(méi)有命中的時(shí)候，瀏覽器會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)器，服務(wù)器根據(jù)請(qǐng)求頭中的部分信息來(lái)判斷是否命中緩存。如果命中，則返回 304 ，告訴瀏覽器資源未更新，可使用本地的緩存。
從圖中可以看出，協(xié)商緩存一般是這樣一個(gè)流程：
把資源標(biāo)識(shí)，比如 If-Modify-Since 或 Etag 發(fā)送到服務(wù)器，確認(rèn)資源是否更新；
如果資源未更新，請(qǐng)求響應(yīng)返回的http狀態(tài)為 304 并且會(huì)顯示一個(gè) Not Modified 的字符串，告訴瀏覽器使用本地緩存;
如果資源已經(jīng)更新，返回新的數(shù)據(jù)；
將新數(shù)據(jù)存入緩存。
Last-Modified，If-Modified-Since瀏覽器第一次請(qǐng)求資源的時(shí)候，服務(wù)器返回的 header 上會(huì)帶有一個(gè) Last-Modified 字段，表示資源最后修改的時(shí)間。
Last-Modified: Fri, 27 Oct 2017 07:55:30 GMT
同樣的，這是一個(gè) GMT 的絕對(duì)時(shí)間。
當(dāng)瀏覽器再次請(qǐng)求該資源時(shí)，請(qǐng)求頭中會(huì)帶有一個(gè) If-Modified-Since 字段，這個(gè)值是第一次請(qǐng)求返回的 Last-Modified 的值。服務(wù)器收到這個(gè)請(qǐng)求后，將 If-Modified-Since 和當(dāng)前的 Last-Modified 進(jìn)行對(duì)比。如果相等，則說(shuō)明資源未修改，返回 304，瀏覽器使用本地緩存。
well，這個(gè)方法也是有缺點(diǎn)的：
最小單位是秒。也就是說(shuō)如果我短時(shí)間內(nèi)資源發(fā)生了改變，Last-Modified 并不會(huì)發(fā)生變化；
周期性變化。如果這個(gè)資源在一個(gè)周期內(nèi)修改回原來(lái)的樣子了，我們認(rèn)為是可以使用緩存的，但是 Last-Modified 可不這樣認(rèn)為。
所以，后來(lái)又引入一個(gè) Etag。
EtagEtag 一般是由文件內(nèi)容 hash 生成的，也就是說(shuō)它可以保證資源的唯一性，資源發(fā)生改變就會(huì)導(dǎo)致 Etag 發(fā)生改變。
同樣地，在瀏覽器第一次請(qǐng)求資源時(shí)，服務(wù)器會(huì)返回一個(gè) Etag 標(biāo)識(shí)。當(dāng)再次請(qǐng)求該資源時(shí)， 會(huì)通過(guò) If-no-match 字段將 Etag 發(fā)送回服務(wù)器，然后服務(wù)器進(jìn)行比較，如果相等，則返回 304 表示未修改。
Last-Modified 和 Etag 是可以同時(shí)設(shè)置的，服務(wù)器會(huì)優(yōu)先校驗(yàn) Etag，如果 Etag 相等就會(huì)繼續(xù)比對(duì) Last-Modified，最后才會(huì)決定是否返回 304。
總結(jié)當(dāng)瀏覽器再次訪問(wèn)一個(gè)已經(jīng)訪問(wèn)過(guò)的資源時(shí)，它會(huì)這樣做：
看看是否命中強(qiáng)緩存，如果命中，就直接使用緩存了；
如果沒(méi)有命中強(qiáng)緩存，就發(fā)請(qǐng)求到服務(wù)器檢查是否命中協(xié)商緩存；
如果命中協(xié)商緩存，服務(wù)器會(huì)返回 304 告訴瀏覽器使用本地緩存；
否則，返回最新的資源。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/61894.html
摘要：在一個(gè)成熟的系統(tǒng)中，能夠運(yùn)用到緩存的地方其實(shí)并不是一處。那么在以終端用戶為起點(diǎn)，系統(tǒng)所用的數(shù)據(jù)庫(kù)為終點(diǎn)的這條道路上可以作為緩存設(shè)立點(diǎn)的位置大致有以下這些。緩存也有一系列的副作用需要考慮。 如果這是第二次看到我的文章，歡迎文末掃碼訂閱我個(gè)人的公眾號(hào)（跨界架構(gòu)師）喲~ 本文長(zhǎng)度為3578字，建議閱讀10分鐘。堅(jiān)持原創(chuàng)，每一篇都是用心之作～ 此前的「伸縮性」章節(jié)結(jié)束了，此文是「高性能」章...
摘要：前言秋招宣告結(jié)束，面試了接近家公司，有幸拿到，感謝這段時(shí)間一起找工作面試的朋友和陪伴我的人。一定要提前準(zhǔn)備好，不然面試官叫你說(shuō)遇到的難點(diǎn)，或者直接問(wèn)問(wèn)題時(shí)可能會(huì)懵逼。 前言 秋招宣告結(jié)束，面試了接近20家公司，有幸拿到offer，感謝這段時(shí)間一起找工作面試的朋友和陪伴我的人。這是一段難忘的經(jīng)歷，相信不亞于當(dāng)年的高考吧，也許現(xiàn)在想起來(lái)高考不算什么，也許只有經(jīng)歷過(guò)秋招的人才懂得找工作的艱辛...
摘要：前言秋招宣告結(jié)束，面試了接近家公司，有幸拿到，感謝這段時(shí)間一起找工作面試的朋友和陪伴我的人。一定要提前準(zhǔn)備好，不然面試官叫你說(shuō)遇到的難點(diǎn)，或者直接問(wèn)問(wèn)題時(shí)可能會(huì)懵逼。 前言 秋招宣告結(jié)束，面試了接近20家公司，有幸拿到offer，感謝這段時(shí)間一起找工作面試的朋友和陪伴我的人。這是一段難忘的經(jīng)歷，相信不亞于當(dāng)年的高考吧，也許現(xiàn)在想起來(lái)高考不算什么，也許只有經(jīng)歷過(guò)秋招的人才懂得找工作的艱辛...
答案自己谷歌或百度找。 一、來(lái)源背景 面試題是來(lái)自微博@牛客網(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來(lái)源背景 面試題是來(lái)自微博@?？途W(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...
閱讀 3490·2021-09-22 16:00
閱讀 3575·2021-09-07 10:26
閱讀 3153·2019-08-30 15:55
閱讀 2924·2019-08-30 13:48
閱讀 1418·2019-08-30 12:58
閱讀 2238·2019-08-30 11:15
閱讀 1034·2019-08-30 11:08
閱讀 622·2019-08-29 18:41
