HTTP(V）—— 缓存头Cache-Control的含义和使用

一、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里面去读取。这样造成了服务端修改，客户端未能及时修改。那么我们该怎么做。再前端解决方案中，我们会打包最后的文件，根据文件内容加上一串哈希码，哈希码没有变就说明内容没有变。

HTTP(V）—— 缓存头Cache-Control的含义和使用

猜你喜欢