1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>http-cache</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
}
</style>
<body>
<div style="width: 20%">
<h3>强制缓存</h3>
<hr />
<h4>基于expires</h4>
<img src="./img/test.webp" width="100" />
<hr />
<h4>基于cache-control</h4>
<img src="./img/test1.webp" width="100" />
</div>
<div style="width: 20%; margin-left: 30px">
<h3>协商缓存</h3>
<hr />
<h4>基于last-modified</h4>
<img src="./img/test2.webp" width="100" />
<hr />
<h4>基于etag</h4>
<img src="./img/test3.webp" width="100" />
</div>
</body>
</html>
2.server.js
const http = require('http');
const fs = require('fs');
const url = require('url');
const etag = require('etag');
http.createServer((req, res) => {
console.log(req.method, `req.method`);
const { pathname } = url.parse(req.url);
switch (pathname) {
case '/':
const index = fs.readFileSync('./index.html');
res.statusCode = 200;
res.end(index);
break;
case '/img/test.webp':
const test = fs.readFileSync('./img/test.webp');
res.statusCode = 200;
res.setHeader('expires', new Date(Date.now() + 60 * 60 * 1000).toUTCString());
res.end(test);
break;
case '/img/test1.webp':
const test1 = fs.readFileSync('./img/test1.webp');
res.statusCode = 200;
res.setHeader('cache-control', 'max-age=20');
res.end(test1);
break;
case '/img/test2.webp':
const { mtime } = fs.statSync('./img/test2.webp');
const ifModifiedSince = req.headers['if-modified-since'];
if (ifModifiedSince === mtime.toUTCString()) {
console.log(`协商缓存`);
res.statusCode = 304;
res.end();
return;
}
const test2 = fs.readFileSync('./img/test2.webp');
res.statusCode = 200;
res.setHeader('cache-control', 'no-cache');
res.setHeader('last-modified', mtime.toUTCString());
res.end(test2);
break;
case '/img/test3.webp':
const test3 = fs.readFileSync('./img/test3.webp');
const etagContent = etag(test3);
const iNoneMatch = req.headers['if-none-match'];
if (iNoneMatch === etagContent) {
console.log(`协商缓存`);
res.statusCode = 304;
res.end();
return;
}
res.setHeader('cache-control', 'no-cache');
res.setHeader('etag', etagContent);
res.end(test3);
break;
default:
res.end();
break;
}
}).listen(5000, () => {
console.log(`server is running at http://localhost:5000`);
});
3.依赖列表
{
"name": "http-cache",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^17.0.23",
"etag": "^1.8.1"
}
}