自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

web性能優(yōu)化之：no-cache與must-revalidate深入探究

作者：程序猿小卡_casper
開發(fā) 前端
稍微了解HTTP協(xié)議的前端同學(xué)，相比對(duì)Cache-Control不會(huì)感到陌生，性能優(yōu)化時(shí)經(jīng)常都會(huì)跟它打交道。常見的值有有private、public、no-store、no-cache、must-revalidate、max-age等。本文僅挑no-cache、must-revalidate 這兩個(gè)進(jìn)行值進(jìn)行探究對(duì)比。在項(xiàng)目實(shí)踐中，這兩個(gè)值用的比較多，也比較容易搞混。

引言

稍微了解HTTP協(xié)議的前端同學(xué)，相比對(duì)Cache-Control不會(huì)感到陌生，性能優(yōu)化時(shí)經(jīng)常都會(huì)跟它打交道。

常見的值有有private、public、no-store、no-cache、must-revalidate、max-age等。

各個(gè)取值所代表的含義，網(wǎng)上總結(jié)挺多的，這里就不打算再進(jìn)行逐一介紹，感興趣的可以一起探討交流。

本文僅挑no-cache、must-revalidate 這兩個(gè)進(jìn)行值進(jìn)行探究對(duì)比。在項(xiàng)目實(shí)踐中，這兩個(gè)值用的比較多，也比較容易搞混。

Cache-Control: no-cacheCache-Control: max-age=60, must-revalidate

傳送門：RFC2616關(guān)于Cache-Control首部的介紹。

no-cache、must-revalidate簡(jiǎn)介

  • no-cache: 告訴瀏覽器、緩存服務(wù)器，不管本地副本是否過(guò)期，使用資源副本前，一定要到源服務(wù)器進(jìn)行副本有效性校驗(yàn)。
  • must-revalidate：告訴瀏覽器、緩存服務(wù)器，本地副本過(guò)期前，可以使用本地副本;本地副本一旦過(guò)期，必須去源服務(wù)器進(jìn)行有效性校驗(yàn)。

上面的介紹涉及三個(gè)主體：瀏覽器、緩存服務(wù)器、源服務(wù)器。下面小節(jié)會(huì)簡(jiǎn)單進(jìn)行介紹。

瀏覽器、緩存服務(wù)器、源服務(wù)器

  • 瀏覽器：資源請(qǐng)求直接發(fā)起方。
  • 源服務(wù)器：資源實(shí)際提供方。
  • 緩存服務(wù)器：在瀏覽器、源服務(wù)器之間架設(shè)的中間服務(wù)器，由它代替瀏覽器，向源服務(wù)器發(fā)起資源請(qǐng)求;

緩存服務(wù)器作用如下。緩存服務(wù)器不是必須的，瀏覽器可也可與源服務(wù)器直接通信。

加速資源訪問(wèn)速度，降低源服務(wù)器的負(fù)載。緩存服務(wù)器從源服務(wù)器獲取資源，并返回給瀏覽器。此外，緩存服務(wù)器一般還會(huì)在本地保存資源的副本，當(dāng)有相同的資源請(qǐng)求到來(lái)，緩存服務(wù)器可返回資源副本，以此提高資源訪問(wèn)速度。

對(duì)比測(cè)試場(chǎng)景、環(huán)境準(zhǔn)備

對(duì)比測(cè)試場(chǎng)景

下文會(huì)通過(guò)以下兩種場(chǎng)景的對(duì)比測(cè)試，來(lái)探究no-cache、must-revalidate的區(qū)別。

  • 瀏覽器 直接訪問(wèn) 源服務(wù)器。
  • 瀏覽器 通過(guò) 緩存服務(wù)器，間接訪問(wèn) 源服務(wù)器。

環(huán)境準(zhǔn)備

  • 操作系統(tǒng)：OSX 10.11.4
  • 瀏覽器：Chrome 52.0.2743.116 (64-bit)、Firefox 49.0.2
  • 緩存服務(wù)器：Squid 3.6
  • 源服務(wù)器：Express 4.14.0

1、下載實(shí)驗(yàn)代碼：可以訪問(wèn)github主頁(yè)獲取，也可通過(guò)git clone下載到本地。

  1. git clone https://github.com/chyingp/tech-experiment.git 
  2.  
  3. cd tech-experiment/2016.10.25-cache-control/ 
  4.  
  5. npm install  

2、安裝Squid，步驟略，下載地址。

3、可選：?jiǎn)?dòng)Squid，并將本地http代理設(shè)置為Squid的ip和端口。

備注：測(cè)試場(chǎng)景“通過(guò)緩存服務(wù)器，間接訪問(wèn)源服務(wù)器資源”時(shí)，才需要這一步。

4、可選：將本地代理設(shè)置為Charles的地址，然后將Charles的代理地址設(shè)置為squid的代理地址。(避免瀏覽器開發(fā)者工具對(duì)request header的修改，干擾實(shí)驗(yàn)結(jié)果)

場(chǎng)景一：瀏覽器->源服務(wù)器

首先，通過(guò)以下腳本啟動(dòng)本地服務(wù)器(源服務(wù)器)。

  1. cd connect-directly 
  2.  
  3. node server.js  

Cache-Control: no-cache

用例1：二次訪問(wèn)，源服務(wù)器 上 資源 未發(fā)生變化

訪問(wèn)地址為：http://127.0.0.1:3000/no-cache

步驟一：***次訪問(wèn)，返回內(nèi)容如下。可以看到，返回了Cache-Control: no-cache。

 

 

  1. HTTP/1.1 200 OK 
  2. X-Powered-By: Express 
  3. Cache-Control: no-cache 
  4. Content-Type: text/html; charset=utf-8 
  5. Content-Length: 11 
  6. ETag: W/"b-s0vwqaICscfrawwztfPIiA" 
  7. Date: Wed, 26 Oct 2016 07:46:28 GMT 
  8. Connection: keep-alive  

步驟二：第二次訪問(wèn)，返回內(nèi)容如下。返回狀態(tài)碼為304 Not Modified，表示經(jīng)過(guò)校驗(yàn)，源服務(wù)器上的資源沒(méi)有變化，瀏覽器可以采用本地副本。

 

 

  1. HTTP/1.1 304 Not Modified 
  2. X-Powered-By: Express 
  3. Cache-Control: no-cache 
  4. ETag: W/"b-s0vwqaICscfrawwztfPIiA" 
  5. Date: Wed, 26 Oct 2016 07:47:31 GMT 
  6. Connection: keep-alive  

用例2：二次訪問(wèn)，源服務(wù)器 上 資源 發(fā)生變化

步驟一：訪問(wèn)地址為：http://127.0.0.1:3000/no-cach...

備注：change=1告訴源服務(wù)器，每次訪問(wèn)都返回不同內(nèi)容

步驟一：***次訪問(wèn)，內(nèi)容如下，不贅述。

 

 

  1. HTTP/1.1 200 OK 
  2. X-Powered-By: Express 
  3. Cache-Control: no-cache 
  4. Content-Type: text/html; charset=utf-8 
  5. Content-Length: 11 
  6. ETag: W/"b-8n8r0vUN+mIIQCegzmqpuQ" 
  7. Date: Wed, 26 Oct 2016 07:48:01 GMT 
  8. Connection: keep-alive  

步驟二：第二次訪問(wèn)，返回內(nèi)容如下。注意Etag變化了，表示源服務(wù)器資源已發(fā)生變化。于是狀態(tài)碼為200 OK，源服務(wù)器返回新版本的資源給瀏覽器。

 

 

  1. HTTP/1.1 200 OK 
  2. X-Powered-By: Express 
  3. Cache-Control: no-cache 
  4. Content-Type: text/html; charset=utf-8 
  5. Content-Length: 11 
  6. ETag: W/"b-0DK7Mx61dfZc1vIPJDSNSQ" 
  7. Date: Wed, 26 Oct 2016 07:48:38 GMT 
  8. Connection: keep-alive  

Cache-Control: must-revalidate

訪問(wèn)地址：http://127.0.0.1:3000/must-re...

可選參數(shù)說(shuō)明：

  • max-age：源站返回的內(nèi)容，max-age是多少(單位是s)。
  • change：源站返回的內(nèi)容，是否變化，如果是1，則變化。

用例1：二次訪問(wèn)，瀏覽器緩存未過(guò)期

訪問(wèn)地址：http://127.0.0.1:3000/must-re...

備注：max-age=10表示，希望資源緩存10s

步驟一：***次訪問(wèn)，返回內(nèi)容如下。

 

 

  1. HTTP/1.1 200 OK 
  2. X-Powered-By: Express 
  3. Cache-Control: max-age=10, must-revalidate 
  4. Content-Type: text/html; charset=utf-8 
  5. Content-Length: 16 
  6. ETag: W/"10-dK948plT5cojN3y7Cy717w" 
  7. Date: Wed, 26 Oct 2016 08:06:16 GMT 
  8. Connection: keep-alive 

步驟二：第二次訪問(wèn)(在10s內(nèi))，如下截圖所示，瀏覽器直接從本地緩存里讀取資源副本，并沒(méi)有重新發(fā)起HTTP請(qǐng)求。

 

用例2：二次訪問(wèn)，瀏覽器緩存已過(guò)期，源服務(wù)器 資源未變化

步驟一：***次訪問(wèn)略過(guò)。第二次訪問(wèn)如下截圖所示(10s后)，返回304 Not Modified。

 

 

  1. HTTP/1.1 304 Not Modified 
  2. X-Powered-By: Express 
  3. Cache-Control: max-age=10, must-revalidate 
  4. ETag: W/"10-dK948plT5cojN3y7Cy717w" 
  5. Date: Wed, 26 Oct 2016 08:09:22 GMT 
  6. Connection: keep-alive  

用例3：瀏覽器緩存已過(guò)期，源服務(wù)器 資源 已變化

訪問(wèn)地址：http://127.0.0.1:3000/must-re...

步驟一：***次訪問(wèn)，截圖如下。

 

步驟二：第二次訪問(wèn)(10s后)，返回截圖如下，可以看到返回了200。 

 

 

 

 

場(chǎng)景2：瀏覽器->緩存服務(wù)器->源服務(wù)器

從上面的對(duì)比實(shí)驗(yàn)已經(jīng)知道，在不經(jīng)過(guò)緩存服務(wù)器的情況下，no-cache、must-revalidate在緩存校驗(yàn)方面的差別。

接下來(lái)，我們?cè)倏聪?，引入緩存服?wù)器后，二者表現(xiàn)的差異點(diǎn)。

備注：下文我們會(huì)通過(guò)查看Squid的訪問(wèn)日志，來(lái)確認(rèn)緩存服務(wù)器的行為。這里對(duì)日志中的幾個(gè)關(guān)鍵字先粗略解釋下：

  • TCP_MISS：沒(méi)有***緩存。有可能是緩存服務(wù)器不存在資源的副本，也有可能資源副本已過(guò)期。
  • TCP_MEM_HIT：***了緩存。緩存服務(wù)器存在資源的副本，并且副本未過(guò)期。

再次貼上之前的圖。

 

 

Cache-Control: no-cache

用例1：chrome***次訪問(wèn)資源

chrome訪問(wèn)截圖如下：200 ok

 

squid日志：TCP_MISS，表示沒(méi)有***本地資源副本。

  1. 1477501799.573 17 127.0.0.1 TCP_MISS/200 299 GET http://127.0.0.1:3000/no-cache - HIER_DIRECT/127.0.0.1 text/html 

用例2：chrome再次訪問(wèn)該資源。且源服務(wù)器上，該資源未變化

訪問(wèn)地址：http://127.0.0.1:3000/no-cache

***次訪問(wèn)略。第二次訪問(wèn)，chrome訪問(wèn)截圖如下：

 

squid訪問(wèn)日志如下：TCP_MISS/304 。表示緩存服務(wù)器 聯(lián)系了 源服務(wù)器，發(fā)現(xiàn)內(nèi)容沒(méi)變化，于是返回304。

  1. 1477501987.785 1 127.0.0.1 TCP_MISS/304 238 GET http://127.0.0.1:3000/no-cache - HIER_DIRECT/127.0.0.1 - 

用例3：chrome再次訪問(wèn)該資源。且源服務(wù)器上，該資源已變化

訪問(wèn)地址：http://127.0.0.1:3000/no-cach...

備注：change=1 表示強(qiáng)制每次訪問(wèn)源服務(wù)器，返回的資源都是新的。

***次訪問(wèn)略。第二次訪問(wèn)，chrome截圖如下，狀態(tài)碼為200。

 

從squid日志來(lái)看，緩存服務(wù)器 訪問(wèn) 源服務(wù)器，并返回200給瀏覽器。

  1. 1477647837.216 1 127.0.0.1 TCP_MISS/200 299 GET http://127.0.0.1:3000/no-cache? - HIER_DIRECT/127.0.0.1 text/html 

Cache-Control: must-revalidate

用例1：緩存服務(wù)器 已存在 資源副本，且該資源副本 未過(guò)期

訪問(wèn)地址：http://127.0.0.1:3000/must-re...

備注：max-age=900表示資源有效期是900s

步驟一：

chrome***次訪問(wèn) 該資源，緩存服務(wù)器上沒(méi)有該資源副本，于是訪問(wèn)源服務(wù)器。最終，緩存服務(wù)器給瀏覽器返回200。此時(shí)，緩存服務(wù)器squid上有了資源的副本。

步驟二：

firefox***次訪問(wèn) 該資源(900s內(nèi))。緩存服務(wù)器上已有該資源副本，且該副本未過(guò)期。于是，緩存服務(wù)器給firefox返回該資源副本，且狀態(tài)碼為200。(緩存***)

為了驗(yàn)證步驟二中，緩存服務(wù)器 返回的是本地資源的副本，查看squid日志。其中，第二條就是firefox的訪問(wèn)記錄，TCP_MEM_HIT/200表示***本地緩存。

  1. 1477648947.594 5 127.0.0.1 TCP_MISS/200 325 GET http://127.0.0.1:3000/must-revalidate? - HIER_DIRECT/127.0.0.1 text/html 
  2.  
  3. 1477649012.625 0 127.0.0.1 TCP_MEM_HIT/200 333 GET http://127.0.0.1:3000/must-revalidate? - HIER_NONE/- text/html  

用例2：緩存服務(wù)器 已存在 資源副本，該資源副本已過(guò)期，但源服務(wù)器上 資源未改變

訪問(wèn)鏈接：http://127.0.0.1:3000/must-re...

用chrome先后訪問(wèn)該資源，其間間隔超過(guò)10s。第二次訪問(wèn)時(shí)，chrome收到響應(yīng)如下。

 

查看squid日志?？梢钥吹?，狀態(tài)為TCP_MISS/304，表示本地副本已過(guò)期，跟源服務(wù)器進(jìn)行校驗(yàn)，發(fā)現(xiàn)源服務(wù)器上資源未改變。于是，給瀏覽器返回304。

  1. 1477649429.105 11 127.0.0.1 TCP_MISS/304 258 GET http://127.0.0.1:3000/must-revalidate? - HIER_DIRECT/127.0.0.1 - 

用例3：緩存服務(wù)器 已存在 資源副本，該資源副本 已過(guò)期，但源服務(wù)器上 資源已改變

訪問(wèn)地址：http://127.0.0.1:3000/must-re...

用chrome先后訪問(wèn)該資源，其間間隔超過(guò)10s。第二次訪問(wèn)時(shí)，chrome收到響應(yīng)如下

 

squid日志如下，狀態(tài)都是TCP_MISS/200，表示沒(méi)有***緩存。

  1. 1477650702.807 8 127.0.0.1 TCP_MISS/200 325 GET http://127.0.0.1:3000/must-revalidate? - HIER_DIRECT/127.0.0.1 text/html 
  2.  
  3. 1477651020.516 4 127.0.0.1 TCP_MISS/200 325 GET http://127.0.0.1:3000/must-revalidate? - HIER_DIRECT/127.0.0.1 text/html  

對(duì)比結(jié)論

以下針對(duì)的都是瀏覽器第n次訪問(wèn)資源。(n>1)

不考慮緩存服務(wù)器

首部 本地緩存是否過(guò)期 源服務(wù)器資源是否改變 是否重新校驗(yàn) 狀態(tài)碼
no-cache 不確定 否 是 304
no-cache 不確定 是 是 200
must-revalidate 否 是/否 否 200(來(lái)自瀏覽器緩存)
must-revalidate 是 否 是 304
must-revalidate 是 是 是 200

考慮緩存服務(wù)器

首部本地緩存是否過(guò)期緩存服務(wù)器副本是否過(guò)期源服務(wù)器資源是否改變是否重新校驗(yàn)狀態(tài)碼

首部 本地緩存是否過(guò)期 緩存服務(wù)器副本是否過(guò)期 源服務(wù)器資源是否改變 是否重新校驗(yàn) 狀態(tài)碼
no-cache 不確定 不確定 否 是 304
no-cache 不確定 不確定 是 是 200
must-revalidate 否 是/否 是/否 否 200(來(lái)自瀏覽器緩存)
must-revalidate 是 否 是/否 是 304(來(lái)自緩存服務(wù)器)
must-revalidate 是 是 否 是 304
must-revalidate 是 是 是 是 200

寫在后面

經(jīng)過(guò)一輪對(duì)比測(cè)試，發(fā)現(xiàn)no-cache、must-revalidate這兩個(gè)值還是蠻有意思的。實(shí)際上，由于篇幅原因，這里還有一些內(nèi)容尚未進(jìn)行對(duì)比實(shí)驗(yàn)。比如：

  • 當(dāng)must-revalidate或no-cache跟max-stale一起使用時(shí)的表現(xiàn)。
  • no-cache跟max-age=0, mustvalidate的區(qū)別。
  • no-chche制定具體的字段名時(shí)，跟不指明具體字段名時(shí)，緩存校驗(yàn)行為上的區(qū)別。
  • proxy-revalidate跟must-revalidate的區(qū)別。
  • 緩存服務(wù)器本身優(yōu)化算法對(duì)實(shí)驗(yàn)結(jié)果的影響。

對(duì)比實(shí)驗(yàn)過(guò)程比較枯燥繁瑣，如有不嚴(yán)謹(jǐn)或錯(cuò)漏的地方，敬請(qǐng)指出 :)

這里留個(gè)經(jīng)常會(huì)碰到的問(wèn)題，供讀者探討：no-cache跟max-age=0, mustvalidate的區(qū)別。

責(zé)任編輯：龐桂玉 來(lái)源： segmentfault
web代理緩存
相關(guān)推薦

2020-10-07 14:20:41

Tomcat深入解析

2015-09-15 10:40:26

HTTP2 WEB 性能優(yōu)化

2015-09-15 10:46:29

2015-09-15 10:54:54

HTTP2 WEB 性能優(yōu)化

2014-12-10 10:12:02

Web

2021-09-27 08:16:38

Webpack 前端Cache

2024-08-30 14:37:00

2009-12-23 16:40:51

寬帶路由器

2023-10-11 08:36:42

復(fù)合查詢腳本查詢

2022-03-02 11:13:50

Web前端開發(fā)

2021-07-29 14:20:34

網(wǎng)絡(luò)優(yōu)化移動(dòng)互聯(lián)網(wǎng)數(shù)據(jù)存儲(chǔ)

2022-02-16 14:10:51

服務(wù)器性能優(yōu)化Linux

2021-11-29 11:13:45

服務(wù)器網(wǎng)絡(luò)性能

2015-08-17 10:35:56

Web性能優(yōu)化

2013-01-22 15:27:23

WebWeb前端

2015-06-23 16:36:11

Web性能優(yōu)化

2012-01-10 16:22:25

Web

2021-09-09 12:28:50

Sentry Web性能監(jiān)控

2009-06-30 11:23:02

性能優(yōu)化

2025-01-02 14:50:34

MyBatis開發(fā)緩存
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)