HTTP(V）—— 缓存头Cache-Control的含义和使用
发布时间
阅读量：
阅读量
一、Cache-Control的可缓存性
- public：在HTTP请求返回的内容经过的所有路径中，都可以对返回内容进行一个缓存的操作。
- private：只有发起请求的浏览器才可以进行缓存
- no-cache：可以在本地进行缓存，但是每次发起请求都需要到服务器去验证一下，如果服务器返回告诉你可以使用本地缓存，你才可以去使用本地的缓存。
二、Cache-Control到期(混村什么时间到期)
- max-age=
：缓存多少秒之后才会过期。 - s-maxage=
：它会替代max-age，但是只有在 代理服务器中才会起作用。 - max-stale=
：当我们缓存过期以后，如果有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里面去读取。这样造成了服务端修改，客户端未能及时修改。那么我们该怎么做。再前端解决方案中，我们会打包最后的文件，根据文件内容加上一串哈希码，哈希码没有变就说明内容没有变。
全部评论 (0)
还没有任何评论哟~