最近在學(xué)習(xí)網(wǎng)站性能優(yōu)化相關(guān)的內(nèi)容赦肋，關(guān)于網(wǎng)站優(yōu)化點(diǎn)特別多而HTTP緩存也是比較重要的一部分纯赎，于是今天就著重看下HTTP緩存相關(guān)的內(nèi)容加深下對(duì)此相關(guān)知識(shí)的理解和認(rèn)識(shí)谦疾。自己動(dòng)手通過(guò)簡(jiǎn)單的服務(wù)，看看其中的過(guò)程犬金。
- ETag驗(yàn)證緩存的響應(yīng)
在本地通過(guò) express 啟了一個(gè)非常簡(jiǎn)單的個(gè)服務(wù)，具體如下
// app.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('hello http')
})
app.listen(3000, () => {
console.log('The server is running at http://127.0.0.1:3000/')
})
但是仔細(xì)看卻發(fā)現(xiàn)，第一次進(jìn)入頁(yè)面http://127.0.0.1:3000/時(shí)尸执，Status為200而再次刷新發(fā)現(xiàn)Status卻是304
仔細(xì)對(duì)比發(fā)現(xiàn)
- 第一次請(qǐng)求時(shí)候請(qǐng)求參數(shù)中并沒(méi)有 If-None-Match 字段但是卻有個(gè)Pragma新翎；同時(shí)在請(qǐng)求的Response中有一個(gè)
ETag: W/"a-QFZ79AprHeNlMfPMKXyEUV+lyOg"字段。 - 刷新頁(yè)面后再次請(qǐng)求在請(qǐng)求頭中卻有個(gè)
If-None-Match: W/"a-QFZ79AprHeNlMfPMKXyEUV+lyOg"该默，If-None-Match 的值和第一次請(qǐng)求的ETag的值相同瞳氓。
經(jīng)過(guò)查詢才了解原理瀏覽器會(huì)根據(jù)HTTP請(qǐng)求的ETag驗(yàn)證請(qǐng)求的資源是否發(fā)生了改變，如果它未發(fā)生變化栓袖，服務(wù)器將返回“304 Not Modified”響應(yīng)匣摘，并且資源從瀏覽器緩存中讀取锅锨，這樣就不必再次下載請(qǐng)求。
由此看來(lái)整個(gè)的過(guò)程就是下面這樣：
- 如果緩存中有ETag 令牌恋沃，客戶端請(qǐng)求時(shí)會(huì)自動(dòng)在“If-None-Match” HTTP 請(qǐng)求標(biāo)頭內(nèi)提供 ETag 令牌必搞。
- 服務(wù)器根據(jù)當(dāng)前資源核對(duì)令牌，驗(yàn)證是否發(fā)生變化囊咏，將驗(yàn)證結(jié)果通知給客戶端恕洲，客戶端根據(jù)結(jié)果看看是否需要從緩存中讀取還是發(fā)送資源請(qǐng)求。
補(bǔ)充一個(gè)很直白的 TCP協(xié)議的三次握手 的理解梅割。
為了驗(yàn)證查證的結(jié)果霜第，我又添加一個(gè)請(qǐng)求處理。這個(gè)過(guò)程是户辞，客戶端明確返回一個(gè)ETag, 但是這里每次請(qǐng)求的的返回值都不相同泌类，這里簡(jiǎn)單的使用了個(gè)etag++。
// app.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('hello http');
})
// 驗(yàn)證ETag
let etag = 0;
app.get('/test', (req, res) => {
etag++;
res.set('ETag', etag);
res.send('ETag');
})
app.listen(3000, () => {
console.log('The server is running at http://127.0.0.1:3000/')
})
查看下 /test 地址的請(qǐng)求結(jié)果底燎，會(huì)發(fā)現(xiàn)If-None-Match 的值和 Response中的 ETag值每次都不相同刃榨，并且是 瀏覽器會(huì)將每次的 ETag 值都緩存起來(lái)在下次請(qǐng)求的時(shí)候發(fā)送給服務(wù)器。這樣一來(lái)双仍，每次服務(wù)器每次校驗(yàn)的值都是不相同的枢希，所以這種就沒(méi)有做緩存，因此每次請(qǐng)求 /test 地址都是 200 的狀態(tài)朱沃。
