緩存控制Cache-Control
Cache-Control是Web性能優(yōu)化的一種,能加速HTTP請求與響應(yīng)链蕊。
服務(wù)器中設(shè)置響應(yīng)頭:
response.setHeader('Cache-Control', 'max-age=30')
30秒內(nèi)不會再次請求瀏覽器從內(nèi)存中把請求的內(nèi)容拿給你敦锌。
例如馒疹,向服務(wù)器請求一個很大的main.js文件,下載這個文件需要較長時間乙墙,服務(wù)器在返回文件的同時在響應(yīng)頭中設(shè)置Cache-Control: max-age=30
颖变。30秒內(nèi)再次請求同樣的URL生均,瀏覽器不會再次發(fā)起請求,而是直接從內(nèi)存中返回上次的main.js文件腥刹,這樣就節(jié)約了再次下載文件的時間马胧。30秒后再次請求這個main.js,服務(wù)器返回文件的同時再次設(shè)置Cache-Control衔峰,如此重復(fù)漓雅。
如何更新緩存
一般設(shè)置Cache-Control的時間都會很久,比如一年朽色,十年,盡量不再發(fā)請求组题。那么會有一個問題:如果頁面有更新葫男,用戶沒有辦法獲取最新的版本。
所以入口處(首頁崔列,html)不能設(shè)置Cache-Control梢褐。
如果全都設(shè)置了Cache-Control,用戶每次訪問都直接從內(nèi)存中讀取內(nèi)容赵讯,不會向服務(wù)器發(fā)起任何請求盈咳,獲取不到更新。
而留著入口不用緩存边翼,每次請求首頁都向服務(wù)器發(fā)起請求鱼响,如果其他文件有更新,就在入口處把URL變一下(不改變請求路徑组底,例如加一個查詢參數(shù))丈积,這樣瀏覽器就不會使用緩存,而是下載最新的版本债鸡,再把新版本緩存下來江滨。
改變URL,例如厌均,加一個查詢參數(shù):
<link rel="stylesheet" href="./css/default.css">
//更新唬滑,變成
<link rel="stylesheet" href="./css/default.css/?v=2">
//再更新
<link rel="stylesheet" href="./css/default.css/?v=3">
上面代碼還是在訪問/css
,但是URL不是以前的URL了棺弊,所以瀏覽器不會使用緩存晶密,而是下載新的css。
Expires
Expires頭制定了一個日期/時間镊屎,在這個日期/時間之后惹挟,HTTP響應(yīng)被認(rèn)為是過時的,不再用緩存缝驳,重新請求连锯。
如果還設(shè)置了"max-age"或"s-max-age"指令的Cache-Control
響應(yīng)頭归苍,那么Expires
頭就會被忽略。
Cache-Control
是設(shè)置多長時間后過期运怖,是一個時間長度拼弃;
Expires
是設(shè)置什么時候過期,是一個時間點(diǎn)摇展。
但是Expires設(shè)置的時間點(diǎn)指的是本地時間吻氧,如果用戶本地時間錯亂就會出問題。
ETag
首先了解一下MD5咏连。
MD5是一種摘要算法盯孙,用于確保信息傳輸完整一致。
簡單來說祟滴,MD5把信息變成一個字符串振惰,信息傳輸后再次用MD5解析,任何一點(diǎn)變化都會生成一個不同的字符串垄懂,且內(nèi)容差異越小骑晶,生成的結(jié)果差異越大,把微小的差異放大草慧。
MD5
ETag HTTP響應(yīng)頭是資源特定版本標(biāo)識符桶蛔。
把文件的MD5放到ETag里設(shè)置響應(yīng)頭:
let fileMd5 = md5(string)
response.setHeader('ETag', fileMd5)
在請求這個文件時,響應(yīng)頭里有了ETag: Md5的值
漫谷,
再次請求同意個文件時仔雷,請求頭里帶著If-None-Match: Md5值
,
也就是再次請求時帶著一個版本號(Md5的值)抖剿,如果版本號與上次相同朽寞,說明文件沒有更新,不需要重新下載斩郎。
let fileMd5 = md5(string)
response.setHeader('ETag', fileMd5)
if(request.headers['If-None-Match'] === fileMd5){
//沒有響應(yīng)體
response.statusCode = 304 //Not Modefied
}else{
//有響應(yīng)體
response.write(string)
}
用Cache-Control直接不發(fā)請求脑融,
用ETag,要發(fā)請求缩宜,如果MD5一樣肘迎,不下載。