目录
- 缓存验证的参数
- 服务端如何验证缓存？
0. 概述
上一章介绍了使用Cache-Control中max-age的使用，但是有时候我们希望在客户端使用本地缓存前，先询问下服务端能否使用这个缓存，这个操作被称为缓存验证。
下图为验证的流程。
1. 缓存验证的参数
-
修改服务端代码
- 缓存验证在服务端的响应头中使用
Etag或Last-Modified参数，个人认为这两个参数的区别在于语意，Last-Modified通常根据更新时间来判断，而Etag可以自定义任何的值。客户端的请求头中的参数见下图。 - 更改
max-age，让本地缓存短时间内不会过期。 - 增加
no-cache（用逗号分隔），no-cache参数的作用：允许浏览器存储缓存，但是必须访问服务端去验证，由服务端决定能否使用缓存。 - 在这里我们随意为
Etag和Last-Modified赋值。
const http = require('http')
const fs = require('fs')
const port = 9000
http.createServer(function (request, response) {
console.log('request from ', request.url)
if (request.url === '/') {
// 读取html发送
const html = fs.readFileSync('index.html', 'utf-8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
}
else if (request.url === '/script.js') {
// 返回响应
response.writeHead(status, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=1000000, no-cache',
'Etag': 'dyq666',
'Last-Modified': '111',
})
response.end(“console.log('script')”)
}
}).listen(port)
console.log("serve is listen ", port)
-
观察请求头与响应头
缓存相关的测试，如果不成功，可能是没有清楚浏览器缓存，导致之前的页面缓存在浏览器中。
-
第一次发送请求，响应头中会返回参数。
-
第二次发送请求，浏览器会自动将第一次从响应头中得到的值，通过浏览器规定的参数名发送给服务端。
image.png
2. 服务端如何验证缓存？
-
修改服务端代码
- 判断请求头中的参数的值是否与之前设置的值相同（代码中判断的是
if-none-match，也就是Etag对应的参数）。 - 如果相同，证明客户端可以使用缓存，则返回
304和空的内容，浏览器会根据状态码304去使用缓存。 - 如果不相同，证明客户端无法使用缓存，则返回一个
200和对应的内容，并将当前最新的Etag返回。
/**
* 1. 验证缓存是否有效
*/
const http = require('http')
const port = 9000
http.createServer(function (request, response) {
const url = request.url
switch(url) {
case '/': {
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end('<script src="/script.js"></script>')
}
case '/script.js': {
if (request.headers['if-none-match'] === 'dyq666') {
status = 304
body = ''
} else {
status = 200
body = 'console.log("It is script")'
}
response.writeHead(status, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=100000, no-cache',
'Etag': 'dyq666',
'Last-Modified': '111'
})
response.end(body)
}
}
}).listen(port)
console.log("serve is listen ", port)
-
观察响应码
- 第一次响应中的状态码是
200
- 第二次响应中的状态码是
304
