服务端的缓存验证 Last-Modified和Etag
程序员文章站
2022-03-11 16:35:25
...
Last-Modified
上次修改时间
配合If-Modified-Since或者If-Unmodified-Since使用
对比上次修改时间验证资源是否需要更新
ETag
数据签名
典型做法：对资源内容进行hash计算
配合If-Match或者Id-Non-Match使用
对比资源的签名判断是否使用缓存
缓存验证流程
在浏览器和服务端设置都允许缓存策略的前提下（服务端响应头的Cache-Control不为no-store，即禁止任何缓存），如果某个请求的响应头设置了Last-Modified或Etag：
- 第一次请求：浏览器会记住响应头的
Last-Modified和Etag； - 第二次及以后请求：浏览器会携带保存的
Last-Modified和Etag分别作为If-Modified-Since和If-None-Match放入请求头中携带过去，以此到服务端验证此次请求的资源是否过期或更新；服务端进行判断，若过期或更新，则返回新的资源，否则返回空即可，节省服务端消耗。
实例
node服务文件：server.js
// server.js
const http = require('http')
const fs = require('fs')
http.createServer(function(request, response) {
console.log('request come', request.url)
if (request.url === '/') {
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
}
if (request.url === '/script.js') {
const etag = request.headers['if-none-match']
console.log(request.headers);
if (etag === '777') {
response.writeHead(304, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=200000000, no-cache',
'Last-Modified': '123',
'Etag': '777'
})
response.end('console.log("script loaded")')
} else {
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=200000000, no-cache',
'Last-Modified': '123',
'Etag': '777'
})
response.end('console.log("script loaded")')
}
}
}).listen(8888)
console.log('server listening on 8888')test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body></script> -->
<script>
</script>
<script src="/script.js"></script>
</html>0、打开命令行，在server.js目录下输入：node server，观察到打印了server listening on 8888
1、打开开发者调试工具
2、浏览器输入 http://localhost:8888
3、可以观察到script.js请求成功，响应头中有Last-Mpdified和Etag
4、刷新页面，可以观察到script.js请求返回状态码304，而且请求头中携带了If-Modified-Since和If-None-Match，他们的值刚好是上次请求中服务端返回的Last-Mpdified和Etag