瀏覽器之HTTP緩存的那些事

hersion 發(fā)布于2019-08-06 13:36 / 669人閱讀

摘要：瀏覽器執(zhí)行機(jī)制瀏覽器對(duì)于請(qǐng)求資源擁有一系列成熟的緩存策略。只要有相應(yīng)的緩存響應(yīng)頭要求緩存，瀏覽器客戶端都會(huì)對(duì)資源緩存一份，當(dāng)然緩存響應(yīng)頭也有優(yōu)先級(jí)的。緩存模式瀏覽器緩存可以分為兩種模式，強(qiáng)緩存和協(xié)商緩存。具體請(qǐng)看上面的瀏覽器緩存流程圖。

緩存是提升用戶訪問(wèn)速度，節(jié)省帶寬，減輕服務(wù)器壓力的必經(jīng)之道。

下面都是針對(duì)的Http 1.1來(lái)說(shuō)明，HTTP緩存都是針對(duì)瀏覽器客戶端，其他第三方客戶端不考慮。

什么是瀏覽器緩存

簡(jiǎn)單來(lái)說(shuō)，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過(guò)的Web資源（如html，圖片，js）拷貝一份副本儲(chǔ)存在瀏覽器中。緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本。當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的URL，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問(wèn)請(qǐng)求，還是向源服務(wù)器再次發(fā)送請(qǐng)求（當(dāng)然還有304的情況）。

緩存是根據(jù)url來(lái)處理的，只要url不一樣就是新的資源。

瀏覽器HTTP執(zhí)行機(jī)制

瀏覽器對(duì)于請(qǐng)求資源, 擁有一系列成熟的緩存策略。

只要有相應(yīng)的緩存響應(yīng)頭（要求緩存），瀏覽器客戶端都會(huì)對(duì)資源緩存一份，當(dāng)然緩存響應(yīng)頭也有優(yōu)先級(jí)的。

緩存模式

瀏覽器緩存可以分為兩種模式，強(qiáng)緩存和協(xié)商緩存。

強(qiáng)緩存（無(wú)HTTP請(qǐng)求，無(wú)需協(xié)商）

直接讀取本地緩存，無(wú)需跟服務(wù)端發(fā)送請(qǐng)求確認(rèn)，http返回狀態(tài)碼是200（from memory cache或者from disk cache ，不同瀏覽器返回的信息不一致的）。

對(duì)應(yīng)的Http header有:

Cache-Control

Expires

協(xié)商緩存（有HTTP請(qǐng)求，需協(xié)商）

瀏覽器雖然發(fā)現(xiàn)了本地有該資源的緩存，但是不確定是否是最新的，于是想服務(wù)器詢問(wèn)，若服務(wù)器認(rèn)為瀏覽器的緩存版本還可用，那么便會(huì)返回304（Not Modified） http狀態(tài)碼。

對(duì)應(yīng)的Http header有:

Last-Modified

ETag

流程圖

流程圖只考慮了200和304的狀態(tài)碼，其他異常狀態(tài)碼不考慮。

緩存相關(guān)的Http Header

Http Header包括請(qǐng)求頭和響應(yīng)頭，http1.1會(huì)向前兼用的，會(huì)兼容http1.0的Http header，瀏覽器還有web服務(wù)一般都會(huì)考慮進(jìn)去。

Http Header	描述
Cache-Control	指定緩存機(jī)制，優(yōu)先級(jí)最高
Pragma	http1.0字段，已廢棄，為了兼容一般使用no-cache
Expires	http1.0字段,指定緩存的過(guò)期時(shí)間（為了兼容）
Last-Modified	http1.0字段，資源最后一次的修改時(shí)間
ETag	唯一標(biāo)識(shí)請(qǐng)求資源的字符串，會(huì)覆蓋Last-Modified

Cache-Control

瀏覽器緩存里, Cache-Control是金字塔頂尖的規(guī)則, 它藐視一切其他設(shè)置, 只要其他設(shè)置與其抵觸, 一律覆蓋之.

不僅如此, 它還是一個(gè)復(fù)合規(guī)則, 包含多種值，同時(shí)在請(qǐng)求頭和響應(yīng)頭都可設(shè)置（基本都可以）。

下面列舉了常用的Cache-Control用法。

Cache-Control	描述
no-store	請(qǐng)求和響應(yīng)都不緩存
no-cache	相當(dāng)于max-age:0，即資源被緩存, 但是緩存立刻過(guò)期, 同時(shí)下次訪問(wèn)時(shí)強(qiáng)制驗(yàn)證資源有效性
max-age	緩存資源, 但是在指定時(shí)間(單位為秒)后緩存過(guò)期

Expires

http1.0中存在的字段，該字段所定義的緩存時(shí)間是相對(duì)服務(wù)器上的時(shí)間而言的，如果客戶端上的時(shí)間跟服務(wù)器上的時(shí)間不一致（特別是用戶修改了自己電腦的系統(tǒng)時(shí)間），那緩存時(shí)間可能就沒(méi)啥意義了。在HTTP 1.1版開(kāi)始，使用Cache-Control: max-age=秒替代，這樣就不存在不一致問(wèn)題了。

Last-Modified

Last-Modified和If-Modified-Since是一對(duì)的。

當(dāng)瀏覽器第一次請(qǐng)求一個(gè)url時(shí)，服務(wù)器端的返回狀態(tài)碼為200，同時(shí)HTTP響應(yīng)頭會(huì)有一個(gè)Last-Modified標(biāo)記著文件在服務(wù)器端最后被修改的時(shí)間。

瀏覽器第二次請(qǐng)求上次請(qǐng)求過(guò)的url時(shí)，瀏覽器會(huì)在HTTP請(qǐng)求頭添加一個(gè)If-Modified-Since的標(biāo)記，用來(lái)詢問(wèn)服務(wù)器該時(shí)間之后文件是否被修改過(guò)。

但是Last-Modified是http1.0的產(chǎn)物，有兩個(gè)缺點(diǎn)：

只能精確到秒級(jí)別

內(nèi)容完全沒(méi)改變的資源文件，無(wú)法識(shí)別出來(lái)（只要修改時(shí)間變了，就算變動(dòng)）。

所有就有了ETag。

ETag

ETag解決了Last-Modified的缺點(diǎn)，http1.1的字段，優(yōu)先級(jí)高于Last-Modified。

理論上是ETag優(yōu)先于Last-Modified，但是Nginx一會(huì)把這兩個(gè)一起開(kāi)啟一起驗(yàn)證，而且Nginx ETag的計(jì)算方式把最后修改時(shí)間也算進(jìn)去了（所有這個(gè)算是弱ETag）。

Nginx ETag計(jì)算方式：計(jì)算頁(yè)面文件的最后修改時(shí)間，將文件最后修改時(shí)間的秒級(jí)Unix時(shí)間戳轉(zhuǎn)為16進(jìn)制作為etag的第一部分 計(jì)算頁(yè)面文件的大小，將大小字節(jié)數(shù)轉(zhuǎn)為16進(jìn)制作為etag的第二部分。

ETag有兩種類型：

強(qiáng)ETag

強(qiáng)ETag值，不論實(shí)體發(fā)生多么細(xì)微的變化都會(huì)改變其值。

強(qiáng)ETag表示形式："22FAA065-2664-4197-9C5E-C92EA03D0A16"。

弱ETag

弱 ETag 值只用于提示資源是否相同。只有資源發(fā)生了根本改變產(chǎn) 生差異時(shí)才會(huì)改變 ETag?。這時(shí)，會(huì)在字段值最開(kāi)始處附加 W/。

弱ETag表現(xiàn)形式：W/"22FAA065-2664-4197-9C5E-C92EA03D0A16"。

ETag和If-None-Match是一對(duì):

當(dāng)瀏覽器第一次請(qǐng)求一個(gè)url時(shí)，服務(wù)器端的返回狀態(tài)碼為200，同時(shí)HTTP響應(yīng)頭會(huì)有一個(gè)Etag，存放著服務(wù)器端生成的一個(gè)序列值。

瀏覽器第二次請(qǐng)求上次請(qǐng)求過(guò)的url時(shí)，瀏覽器會(huì)在HTTP請(qǐng)求頭添加一個(gè)If-None-Match的標(biāo)記，用來(lái)詢問(wèn)服務(wù)器該文件有沒(méi)有被修改。

一般網(wǎng)站都會(huì)把Last-Modified和ETag一起用，同時(shí)對(duì)對(duì)比，兩個(gè)條件都滿足了才會(huì)返回304。

Nginx實(shí)例

用實(shí)例來(lái)說(shuō)明，Nginx的安裝和使用請(qǐng)自行網(wǎng)上學(xué)習(xí)，例子的環(huán)境是在Mac系統(tǒng)運(yùn)行的，然后在谷歌瀏覽器上訪問(wèn)（不同瀏覽器的表現(xiàn)會(huì)有點(diǎn)不一樣的，而且瀏覽器還有快捷鍵直接刷新跳過(guò)緩存的）。

注意：nginx在沒(méi)有設(shè)置Cache-Control：max-age=xxx和expires時(shí)，谷歌訪問(wèn)后，后面會(huì)變成200(from memory cache)，然后就造成了文件修改后無(wú)法更新的問(wèn)題（不知道什么時(shí)候過(guò)期）。這個(gè)也很好解決，只要設(shè)置過(guò)期時(shí)間為0，這樣就一定不是強(qiáng)緩存，就不存在這些問(wèn)題。

下面的例子Http Header只需要關(guān)注上面提到的相關(guān)字段。

ETag和Last-Modified例子

Nginx默認(rèn)開(kāi)啟ETag和Last-Modified。

由于Nginx ETag可知，ETag比Last-Modified多了文件大小比較，理論上有ETag就可以不用Last-Modified，但是為了兼容http1.0，很多web服務(wù)器都會(huì)帶上Last-Modified。

Etag關(guān)閉如下:

etag off;

Last-Modified關(guān)閉如下（沒(méi)有找到具體關(guān)閉方式，只好在響應(yīng)頭中直接賦值為空）：

add_header "Last-Modified" "" always;

這些配置，可以隨便設(shè)置在不同層級(jí)，http、server、location都可以。

默認(rèn)的Nginx是同時(shí)開(kāi)啟的，所以不用處理什么。

server {
  listen       80;
  server_name  localhost;
  location / {
    #定義自己的web服務(wù)根目錄
    root   /Users/Sam/www;
    #默認(rèn)訪問(wèn)文件夾時(shí)，訪問(wèn)index.html或者index.htm文件
    index  index.html index.htm;
    location ~* .(jpg|jpeg|gif|bmp|png|js|css){
      #nginx在沒(méi)有設(shè)置Cache-Control：max-age=xxx和expires時(shí)，
      #谷歌訪問(wèn)后，后面會(huì)變成200(from memory cache)，
      #然后就造成了文件修改后無(wú)法更新的問(wèn)題。
      #這個(gè)很好解決，只要設(shè)置過(guò)期時(shí)間為0，這樣就一定不是強(qiáng)緩存，就不存在這些問(wèn)題
        expires 0s;
    }
  }
}

然后在根目錄index.html中引入./test.js文件，然后訪問(wèn)index.html。

首次訪問(wèn)，返回200，然后再次訪問(wèn)才會(huì)返回304。然后無(wú)論如何修改，只要文件被保存（即使內(nèi)容不變），再次訪問(wèn)瀏覽器返回200，然后再次訪問(wèn)返回304（內(nèi)容沒(méi)修改）。

首次訪問(wèn) Http Header(先清理緩存，才算首次訪問(wèn))

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:21:00 GMT
ETag: W/"5bab7b36-15"
Expires: Thu, 27 Sep 2018 03:21:00 GMT
Last-Modified: Wed, 26 Sep 2018 12:27:34 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第二次訪問(wèn) Http Header（無(wú)修改）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=0
Connection: keep-alive
Date: Thu, 27 Sep 2018 03:23:22 GMT
ETag: "5bab7b36-15"
Expires: Thu, 27 Sep 2018 03:23:22 GMT
Last-Modified: Wed, 26 Sep 2018 12:27:34 GMT
Server: nginx/1.10.1

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Wed, 26 Sep 2018 12:27:34 GMT
If-None-Match: W/"5bab7b36-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第三次訪問(wèn) Http Header（有修改）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:25:14 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:25:14 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Wed, 26 Sep 2018 12:27:34 GMT
If-None-Match: W/"5bab7b36-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第四次訪問(wèn) Http Header（無(wú)修改）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=0
Connection: keep-alive
Date: Thu, 27 Sep 2018 03:26:46 GMT
ETag: "5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:26:46 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT
If-None-Match: W/"5bac4d98-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

Cache-Control 和 Expires

server {
  listen       80;
  server_name  localhost;
  location / {
    #定義自己的web服務(wù)根目錄
    root   /Users/Sam/www;
    #默認(rèn)訪問(wèn)文件夾時(shí)，訪問(wèn)index.html或者index.htm文件
    index  index.html index.htm;
    location ~* .(jpg|jpeg|gif|bmp|png|js|css){
      #設(shè)置30秒緩存有效期
        expires 30s;
    }
  }
}

然后在根目錄index.html中引入./test.js文件，然后訪問(wèn)index.html。

首次訪問(wèn)，瀏覽器會(huì)返回200，然后再次訪問(wèn)才會(huì)返回200（from memory cache），然后30秒后過(guò)期訪問(wèn)，如果文件沒(méi)修過(guò)過(guò)，會(huì)返回304，否則返回200，繼續(xù)訪問(wèn)如果沒(méi)過(guò)期期，返回200（from memory cache）。

具體請(qǐng)看上面的瀏覽器緩存流程圖。

首次訪問(wèn) Http Header（先清理緩存，才算首次）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:28:03 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:28:33 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第二次訪問(wèn) Http Header（不能過(guò)期，上面設(shè)置的是30秒，要在上次訪問(wèn)的30秒內(nèi)再次訪問(wèn)）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK (from memory cache)
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:28:03 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:28:33 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第三次訪問(wèn) Http Header（需要過(guò)期，上面設(shè)置的是30秒，上一次訪問(wèn)等待30秒后訪問(wèn)）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=30
Connection: keep-alive
Date: Thu, 27 Sep 2018 03:32:44 GMT
ETag: "5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:33:14 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT
If-None-Match: W/"5bac4d98-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第四次訪問(wèn) Http Header（不能過(guò)期，上面設(shè)置的是30秒，要在上次訪問(wèn)的30秒內(nèi)再次訪問(wèn)修改后的文件）

訪問(wèn)獲取的還是舊文件，文件雖然修改了，但是瀏覽器直接緩存中獲取，沒(méi)發(fā)出請(qǐng)求，無(wú)法獲取最新的內(nèi)容。

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK (from memory cache)
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:28:03 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:28:33 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1

#請(qǐng)求頭
Transfer-Encoding: chunked
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第五次訪問(wèn) Http Header（需過(guò)期，在第四次訪問(wèn)后等待30秒訪問(wèn)修改后的文件）

訪問(wèn)后獲取到了最新文件。

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#響應(yīng)頭
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:36:51 GMT
ETag: W/"5bac4fcc-15"
Expires: Thu, 27 Sep 2018 03:37:21 GMT
Last-Modified: Thu, 27 Sep 2018 03:34:36 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#請(qǐng)求頭
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT
If-None-Match: W/"5bac4d98-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

不需要緩存的場(chǎng)景

緩存是會(huì)提升訪問(wèn)速度、節(jié)省帶寬、減輕服務(wù)器壓力，但是也不能濫用，否則會(huì)出現(xiàn)一些意想不到的問(wèn)題。圖片、css、js等資源文件一般都是需要緩存的，但是像接口數(shù)據(jù)等數(shù)據(jù)會(huì)變動(dòng)的http請(qǐng)求都是不需要緩存的，否則會(huì)造成無(wú)法訪問(wèn)到新數(shù)據(jù)的情況。

場(chǎng)景

html文件不需要強(qiáng)緩存，協(xié)商緩存就行了。

這些都是特殊情況，html文件可以返回304狀態(tài)，但是不要返回200（from memory cache）。html文件最好設(shè)置過(guò)期時(shí)間為0，強(qiáng)制跟服務(wù)器做文件修改對(duì)比（當(dāng)然具體場(chǎng)景具體分析）。

因?yàn)閖s文件和css文件是可以使用版本做控制或者隨機(jī)數(shù)。

js代碼版本迭代更新

這個(gè)場(chǎng)景不是不需要緩存，而是更新了js代碼版本，但是如果用戶還在緩存期內(nèi)，就會(huì)導(dǎo)致頁(yè)面出錯(cuò)。

這種情況就需要進(jìn)行js類庫(kù)版本控制，如：

升級(jí)到到2.0.0時(shí)，我們需要把代碼改成

這樣就不會(huì)訪問(wèn)到緩存的jquery.js。緩存是根據(jù)url來(lái)處理的，只要url不一樣就是新的資源。

前后端使用ajax請(qǐng)求接口數(shù)據(jù)

解決方式

Url添加隨機(jī)數(shù)

這種情況，是前端做處理。

請(qǐng)求頭添加Cache-Control: no-cache

為了兼容http1.0，而外添加Pragma: no-cache，Cache-Control的選項(xiàng)有很多，具體如何選擇，看場(chǎng)景。

前端或者服務(wù)端都可以處理。

一些說(shuō)明

做一些補(bǔ)充說(shuō)明。

memory cache 和 disk cache

這個(gè)兩個(gè)說(shuō)明是谷歌瀏覽器的狀態(tài)碼附加提示語(yǔ)，內(nèi)存緩存和磁盤緩存。其實(shí)很簡(jiǎn)單，只要頁(yè)面在網(wǎng)頁(yè)上打開(kāi)訪問(wèn)，然后不關(guān)閉，刷新的一定是from memory cache，而頁(yè)面關(guān)閉在打開(kāi)一定是from disk cache。這是瀏覽器自身的緩存手段，磁盤緩存一定會(huì)有一份備份的，然后頁(yè)面訪問(wèn)的時(shí)候也會(huì)在內(nèi)存中緩存一份，這樣刷新當(dāng)前頁(yè)面就不會(huì)讀取硬盤，而是直接內(nèi)存中獲?。p少訪問(wèn)磁盤的次數(shù)）。

不同瀏覽器的一些表現(xiàn)差異

不同瀏覽器的緩存手段是一致的，但是文案展現(xiàn)形式，和刷新頁(yè)面的方式會(huì)有差異（如火狐瀏覽器點(diǎn)擊刷新按鈕和回車刷新是不一樣的）。

下面是針對(duì)已經(jīng)強(qiáng)緩存，同時(shí)訪問(wèn)文件無(wú)修改的情況下，不同刷新方式返回的狀態(tài)碼總結(jié)（mac系統(tǒng)）：

瀏覽器	點(diǎn)擊地址欄刷新按鈕	回車刷新	cmd + r刷新
谷歌	200（from memory cache）	200（from memory cache）	200（from memory cache）
火狐	304	200，其他地方說(shuō)明已緩存	304
safari	200，其他地方說(shuō)明已緩存	200，其他地方說(shuō)明已緩存	200，其他地方說(shuō)明已緩存

這里只說(shuō)明下可能會(huì)遇到的疑惑。瀏覽器軟件自身的處理方式，跟http緩存掛不上鉤，我們也無(wú)法處理。

參考文章

304和瀏覽器http緩存

瀏覽器緩存機(jī)制剖析

云服務(wù)器 GPU云服務(wù)器云服務(wù)器那些事 http服務(wù)器的緩存 cdn之高速緩存 webrtc支持那些瀏覽器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/62027.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hersion

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

工創(chuàng)賽基于stm32f103的HAL庫(kù)的全向麥輪的四個(gè)7路尋跡傳感器智能款采集程序

閱讀 3644·2021-10-08 10:04
react 前端項(xiàng)目技術(shù)選型、開(kāi)發(fā)工具、周邊生態(tài)

閱讀 966·2019-08-30 15:54
CSS Variable Study

閱讀 2249·2019-08-29 16:09
jQuery插件之——彈窗框（模態(tài)框）leanModal

閱讀 1409·2019-08-29 15:41
關(guān)于對(duì)象繼承的問(wèn)題——利用空對(duì)象做中介

閱讀 2342·2019-08-29 11:01
一種只寫 SQL、做配置完成復(fù)雜業(yè)務(wù)系統(tǒng)開(kāi)發(fā)的方法

閱讀 1792·2019-08-26 13:51
You don't know cross-origin

閱讀 1105·2019-08-26 13:25
如何構(gòu)建通用存儲(chǔ)中間層

閱讀 1908·2019-08-26 13:24

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

瀏覽器之HTTP緩存的那些事

相關(guān)文章

瀏覽器緩存那些事

瀏覽器緩存那些事

我們來(lái)聊聊Cookie、Session和Storage的那些事

關(guān)于CDN那些事

發(fā)表評(píng)論

0條評(píng)論

hersion

男|高級(jí)講師

TA的文章

工創(chuàng)賽基于stm32f103的HAL庫(kù)的全向麥輪的四個(gè)7路尋跡傳感器智能款采集程序

react 前端項(xiàng)目技術(shù)選型、開(kāi)發(fā)工具、周邊生態(tài)

CSS Variable Study

jQuery插件之——彈窗框（模態(tài)框）leanModal

關(guān)于對(duì)象繼承的問(wèn)題——利用空對(duì)象做中介

一種只寫 SQL、做配置完成復(fù)雜業(yè)務(wù)系統(tǒng)開(kāi)發(fā)的方法

You don't know cross-origin

如何構(gòu)建通用存儲(chǔ)中間層

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

瀏覽器之HTTP緩存的那些事

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！