一、Cache-Control的可缓存性
- public:在HTTP请求返回的内容经过的所有路径中,都可以对返回内容进行一个缓存的操作。
- private:只有发起请求的浏览器才可以进行缓存
- no-cache:可以在本地进行缓存,但是每次发起请求都需要到服务器去验证一下,如果服务器返回告诉你可以使用本地缓存,你才可以去使用本地的缓存。
二、Cache-Control到期(混村什么时间到期)
- max-age=<seconds>:缓存多少秒之后才会过期。
- s-maxage=<seconds>:它会替代max-age,但是只有在 代理服务器中才会起作用。
- max-stale=<seonds>:当我们缓存过期以后,如果有max-stale,只要在max-stale这个时间之内,还会使用过期的缓存。只有在发起端设置才有用,在服务端设置没有用。
三、Cache-Control重新验证
must-revalidate:如果我们的和缓存过期了,我们必须重新发送到源服务端,重新获取这部分数据,来验证这部分数据是否真的过期了
proxy-revalidate:用在缓存服务器中,缓存过期后,必须要去源服务器上重新请求一次,而不能使用本地的缓存
四、其他
- no-store:本地不可进行缓存的,每次发起请求,都需要去服务端去拿去数据。
- no-transform:用在proxy服务器上,告诉服务器不要随意改动返回的额内容。
五、测试
我们修改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 html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control':'max-age=20'
})
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">
<title>Title</title>
</head>
<body>
</body>
<script src="/script.js">
/*fetch('http://localhost:8887', {
method: 'PUT',
headers: {
'x-Test-Cors': '123'
}
})*/
</script>
</html>
然后我们进行刷新浏览器,可以看到script.js的Size和Time如下所示:
然后再刷新,我们可以看到script.js的Size和Time就变了。
然后我们修改server.js如下:
然后重启服务器,控制台输出script loaded twice。然后我们将server.js改回原来的样子,重启服务,控制台输入依旧是script loaded twice。因为URL没有变,它就还是从cache里面去读取。这样造成了服务端修改,客户端未能及时修改。那么我们该怎么做。再前端解决方案中,我们会打包最后的文件,根据文件内容加上一串哈希码,哈希码没有变就说明内容没有变。