對(duì)比（協(xié)商）緩存
比較一下再去決定是用緩存還是重新獲取數(shù)據(jù)，這樣會(huì)減少網(wǎng)絡(luò)請(qǐng)求，提高性能。
對(duì)比緩存的工作原理
客戶端第一次請(qǐng)求服務(wù)器的時(shí)候，服務(wù)器會(huì)把數(shù)據(jù)進(jìn)行緩存，同時(shí)會(huì)生成一個(gè)緩存標(biāo)識(shí)符，這個(gè)緩存標(biāo)識(shí)符會(huì)被發(fā)送到客戶端，客戶端第二次請(qǐng)求服務(wù)器的時(shí)候，會(huì)把緩存標(biāo)識(shí)符發(fā)送到服務(wù)器，服務(wù)器會(huì)根據(jù)緩存標(biāo)識(shí)符進(jìn)行判斷，如果緩存標(biāo)識(shí)符相同，則服務(wù)器會(huì)判斷緩存是否過(guò)期，如果沒(méi)有過(guò)期，則服務(wù)器會(huì)返回 304，告訴客戶端使用緩存，如果緩存標(biāo)識(shí)符不同，則服務(wù)器會(huì)返回 200，同時(shí)返回新的數(shù)據(jù)。
- 客戶端：
if-modified-since - 服務(wù)端：
Last-Modified對(duì)比最后的修改時(shí)間返回內(nèi)容
缺點(diǎn)是內(nèi)容沒(méi)變化修改時(shí)間變化了也會(huì)重新讀取內(nèi)容，時(shí)間不精確，（精確到秒），如果一秒內(nèi)改了多次也監(jiān)控不到。
下面我們通過(guò)判斷文件的修改時(shí)間是否對(duì)的上，一樣的話直接返回 304 告訴讀取緩存
新建 cache.js 文件
const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");
const server = http.createServer((req, res) => {
const { pathname } = url.parse(req.url);
const filePath = path.join(__dirname, pathname);
console.log(pathname);
res.setHeader("Cache-Control", "no-cache");
// 第二次請(qǐng)求會(huì)帶上 if-modified-since 請(qǐng)求頭
let ifModifiedSince = req.headers["if-modified-since"];
fs.stat(filePath, (err, statObj) => {
if (err) return res.end();
let lastModified = statObj.ctime.toGMTString();
// 判斷文件的修改時(shí)間是否對(duì)的上，一樣的話直接返回 304 告訴讀取緩存
if (ifModifiedSince && lastModified === ifModifiedSince) {
res.statusCode = 304;
return res.end();
}
res.setHeader("Last-Modified", lastModified);
if (err) return (res.statusCode = 404), res.end("Not Found");
// 判斷是否是文件
if (statObj.isFile()) {
fs.createReadStream(filePath).pipe(res);
} else {
res.statusCode = 404;
res.end("Not Found");
}
});
});
server.listen(5000);
然后新建 public 文件夾，里面添加 index.html 和 style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>凱小默測(cè)試對(duì)比緩存：通過(guò)修改時(shí)間</title>
</head>
<body>
<link rel="stylesheet" href="/public/style.css">
</body>
</html>
body {
background-color: seagreen;
}
我們啟動(dòng)服務(wù)，訪問(wèn) http://127.0.0.1:5000/public/index.html，可以看到第二次請(qǐng)求的資源變成了 304
nodemon cache.js
我們修改 style.css 文件，背景改成 pink，然后刷新訪問(wèn)，我們可以看到狀態(tài)碼變成 200，讀取到了新的資源文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-661663.html
body {
background-color: pink;
}
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-661663.html
到了這里，關(guān)于70 # 協(xié)商緩存的配置：通過(guò)修改時(shí)間的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
