資訊專欄INFORMATION COLUMN
摘要：協(xié)商緩存用戶發(fā)送的請(qǐng)求，發(fā)送到服務(wù)器后，由服務(wù)器判定是否從緩存中獲取資源。如果想主動(dòng)清除緩存，也可以在請(qǐng)求頭信息中加入來(lái)禁止緩存。主要取值如下緩存的時(shí)效由決定。是的字段，而是的字段，當(dāng)與同時(shí)存在時(shí)，的優(yōu)先級(jí)要高于。
在講這幾個(gè)屬性之前，先復(fù)習(xí)下瀏覽器的緩存機(jī)制，再結(jié)合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-control / expires
瀏覽器緩存位置分為四種，其優(yōu)先級(jí)順序如下：
Service Worker、Memory Cache、Disk Cache、Push Cache，當(dāng)上述四個(gè)緩存位置中的緩存都沒有命中時(shí)，則會(huì)向服務(wù)器發(fā)起請(qǐng)求。
Service Worker： 不做了解；
Push Cache： 不做了解；
Memory Cache： 即內(nèi)存中的緩存，其特點(diǎn)是容量小、讀取高效、持續(xù)性短，會(huì)隨著進(jìn)程的釋放而釋放，在內(nèi)存使用率低、緩存小尺寸資源時(shí)，會(huì)以 Memory Cache 為優(yōu)先；
Disk Cache： 即磁盤中的緩存，其特點(diǎn)是容量大、讀取緩慢、持續(xù)性長(zhǎng)，任何資源都能存儲(chǔ)到磁盤中，在內(nèi)存使用率高、緩存大尺寸資源時(shí)，會(huì)以 Disk Cache 為優(yōu)先；
瀏覽器緩存策略分為兩種，強(qiáng)緩存和協(xié)商緩存:
強(qiáng)制緩存
用戶發(fā)送的請(qǐng)求，直接從客戶端緩存中獲取，不發(fā)送請(qǐng)求到服務(wù)器，不與服務(wù)器發(fā)生交互行為。
協(xié)商緩存
用戶發(fā)送的請(qǐng)求，發(fā)送到服務(wù)器后，由服務(wù)器判定是否從緩存中獲取資源。
可用如下流程圖來(lái)概括瀏覽器的緩存機(jī)制：
瀏覽器的緩存主要是針對(duì)靜態(tài)資源進(jìn)行緩存，如圖片、文件、js等。
當(dāng)用戶發(fā)起請(qǐng)求時(shí)，瀏覽器先執(zhí)行（a）步驟，查看是否有緩存，如果我們用的是谷歌瀏覽器，也可以在地址欄輸入chrome://cache/查看你發(fā)起的請(qǐng)求鏈接是否在緩存列表中。如果想主動(dòng)清除緩存，也可以在請(qǐng)求頭信息中加入“Cache-Control: no-store”來(lái)禁止緩存。下次是緩存列表中打開的緩存：
如果瀏覽器中有緩存則執(zhí)行（b）步驟，查看緩存是否過(guò)期，主要是通過(guò)緩存中存儲(chǔ)的響應(yīng)頭信息中的緩存標(biāo)識(shí)字段 Expires 或 Cache-Control 來(lái)驗(yàn)證緩存資源是否過(guò)期。Expires 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來(lái)規(guī)定資源的失效時(shí)間。Cache-Control 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來(lái)規(guī)定資源是否需要被瀏覽器緩存以及緩存的有效時(shí)間等。Cache-Control 主要取值如下：
緩存的時(shí)效由max-age決定。在max-age設(shè)定的時(shí)間內(nèi)對(duì)當(dāng)前資源發(fā)起訪問(wèn)后使用的都是瀏覽器內(nèi)部的緩存！超過(guò)max-age設(shè)定的時(shí)間后瀏覽器會(huì)選擇使用協(xié)商緩存。
響應(yīng)頭信息中的no-cahce，表示不使用強(qiáng)制緩存，直接進(jìn)入?yún)f(xié)商緩存，請(qǐng)求頭信息中的no-cache，則表示要重新獲取請(qǐng)求，其作用類似于no-store，響應(yīng)頭信息的no-cache和max-age=0和請(qǐng)求頭信息的max-age=0的作用是一樣的：都要求在使用緩存之前進(jìn)行驗(yàn)證。
Expires 是 HTTP 1.0 的字段，而 Cache-Control 是 HTTP 1.1 的字段，當(dāng) Expires 與 Cache-Control 同時(shí)存在時(shí)，Cache-Control 的優(yōu)先級(jí)要高于 Expires。為了保證瀏覽器兼容，一般兩個(gè)字段后端都會(huì)同時(shí)返回給前端，若是命中緩存（即存在緩存資源并且緩存資源未過(guò)期），則瀏覽器響應(yīng) HTTP Status Code 200，并直接使用緩存資源作為返回結(jié)果，不需要發(fā)起 HTTP 請(qǐng)求，為強(qiáng)制緩存；若是存在緩存資源但緩存資源已過(guò)期，則進(jìn)入下一步驟協(xié)商緩存
與（c）協(xié)商緩存相關(guān)的緩存標(biāo)識(shí)字段是 Last-Modified 和 Etag。
Last-Modified 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來(lái)說(shuō)明資源的最后修改時(shí)間。與之對(duì)應(yīng)的是 If-Modified-Since 字段，在協(xié)商緩存過(guò)程中，瀏覽器發(fā)送的 HTTP 請(qǐng)求中 Header 中會(huì)帶上 If-Modified-Since 字段，值為緩存資源 Last-Modified 屬性的值。
當(dāng)服務(wù)器端接收到帶有 If-Modified-Since 的請(qǐng)求時(shí)，則會(huì)將 If-Modified-Since 的值與被請(qǐng)求資源的最后修改時(shí)間做對(duì)比。如果相同，說(shuō)明資源沒有新的修改，則響應(yīng) HTTP Status Code 304，瀏覽器會(huì)繼續(xù)使用緩存資源；如果最后修改時(shí)間比較新，則說(shuō)明資源被修改過(guò)，則響應(yīng) HTTP Status Code 200，并返回最新的資源。
Etag 是服務(wù)器端在響應(yīng)請(qǐng)求時(shí)用來(lái)說(shuō)明資源在服務(wù)器端的唯一標(biāo)識(shí)。與之對(duì)應(yīng)的是 If-None-Match 字段，在協(xié)商緩存過(guò)程中，瀏覽器發(fā)送的 HTTP 請(qǐng)求中 Header 中會(huì)帶上 If-None-Match 字段，值為該緩存資源 Etag 屬性的值。
當(dāng)服務(wù)器端接收到帶有 If-None-Match 的請(qǐng)求時(shí)，則會(huì)將 If-None-Match 的值與被請(qǐng)求資源的唯一標(biāo)識(shí)做對(duì)比。如果相同，說(shuō)明資源沒有新的修改，則響應(yīng) HTTP Status Code 304，瀏覽器會(huì)繼續(xù)使用緩存資源；如果不同，則說(shuō)明資源被修改過(guò)，則響應(yīng) HTTP Status Code 200，并返回最新的資源。
Last-Modified 是 HTTP 1.0 的字段，而 Etag 是 HTTP 1.1 的字段，當(dāng) Last-Modified 與 Etag 同時(shí)存在時(shí)，Etag 的優(yōu)先級(jí)要高于 Last-Modified。Etag 的出現(xiàn)主要是為了解決 Last-Modified 存在的問(wèn)題。
最后，最新請(qǐng)求下來(lái)的資源，瀏覽器會(huì)根據(jù)Expires 與 Cache-Control判斷是否進(jìn)行緩存。
<完>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109914.html
摘要：協(xié)商緩存用戶發(fā)送的請(qǐng)求，發(fā)送到服務(wù)器后，由服務(wù)器判定是否從緩存中獲取資源。如果想主動(dòng)清除緩存，也可以在請(qǐng)求頭信息中加入來(lái)禁止緩存。主要取值如下緩存的時(shí)效由決定。是的字段，而是的字段，當(dāng)與同時(shí)存在時(shí)，的優(yōu)先級(jí)要高于。 在講這幾個(gè)屬性之前，先復(fù)習(xí)下瀏覽器的緩存機(jī)制，再結(jié)合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-...
摘要：最近在項(xiàng)目中遇到了瀏覽器因緩存問(wèn)題未能成功向后端發(fā)送類型請(qǐng)求的，然后順藤摸瓜順便看了看緩存的知識(shí)，覺得有必要總結(jié)一下。是服務(wù)器響應(yīng)消息頭字段，在響應(yīng)請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求。 最近在項(xiàng)目中遇到了IE瀏覽器因緩存問(wèn)題未能成功向后端發(fā)送GET類型請(qǐng)求的bug，然后順藤摸瓜順便看了看緩存的知識(shí)，覺得有必要總結(jié)一下。 在前端開發(fā)中，性能一直都...
摘要：最近在項(xiàng)目中遇到了瀏覽器因緩存問(wèn)題未能成功向后端發(fā)送類型請(qǐng)求的，然后順藤摸瓜順便看了看緩存的知識(shí)，覺得有必要總結(jié)一下。是服務(wù)器響應(yīng)消息頭字段，在響應(yīng)請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求。 最近在項(xiàng)目中遇到了IE瀏覽器因緩存問(wèn)題未能成功向后端發(fā)送GET類型請(qǐng)求的bug，然后順藤摸瓜順便看了看緩存的知識(shí)，覺得有必要總結(jié)一下。 在前端開發(fā)中，性能一直都...
摘要：了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。這個(gè)表示，你的請(qǐng)求發(fā)送到后端，后端判斷并認(rèn)為資源可以繼續(xù)使用，直接使用本地緩存。盡可能的設(shè)置久緩存時(shí)間，通過(guò)碼來(lái)管理版本。參考鏈接淺談緩存權(quán)威指南上配置緩存首發(fā)地址 背景說(shuō)明 緩存一直是前端性能優(yōu)化中，濃墨重彩的一筆。了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。 之前，對(duì)于緩存的認(rèn)知一直停留在看《HTTP權(quán)威指南》和一些相關(guān)帖子的深度，過(guò)了一段時(shí)...
閱讀 2563·2021-11-15 18:14
閱讀 1770·2021-10-14 09:42
閱讀 3834·2021-10-11 10:58
閱讀 4026·2021-10-09 09:44
閱讀 2533·2021-09-26 09:55
閱讀 2529·2021-09-24 10:38
閱讀 2090·2021-09-04 16:48
閱讀 3325·2021-09-02 15:21
