基于http协议讲解缓存头Cache-Control在服务中的应用

88457112 2019-02-01

先思考两个问题?

  • 在页面中引入静态资源文件,为什么静态资源文件改变后,再次发起请求还是之前的内容,没有变化呢?
  • 在使用webpack等一些打包工具时,为什么要加上一串hash码?

缓存头Cache-Control的一些特性

可缓存性

  • public http经过的任何地方都可以进行缓存
  • private 只有发起请求的这个浏览器才可以进行缓存
  • no-cache 任何一个节点都不可以缓存

到期

  • max-age=<seconds> 设置缓存到多少秒过期
  • s-maxage=<seconds> 会代替max-age,只有在代理服务器才会生效
  • max-stale=<seconds> 是发起请求方主动带起的一个头,是代表即便缓存过期,但是在max-stale这个时间内还可以使用过期的缓存,而不需要愿服务器请求新的内容

重新验证

  • must-revalidate 如果max-age设置的内容过期,必须要向服务器请求重新获取数据验证内容是否过期
  • proxy-revalidate 主要用在缓存服务器,指定缓存服务器在过期后重新从原服务器获取,不能从本地获取

其它

  • no-store 本地和代理服务器都不可以存储这个缓存,永远都要从服务器拿body新的内容使用
  • no-transform 主要用于proxy服务器,告诉代理服务器不要随意改动返回的内容

示例

  • cache-control.html
<html>
 <head>
 <meta charset="utf-8" />
 <title>cache-control</title>
 </head>
 <body>
 <script src="/script.js"></script>
 </body>
</html>
  • cache-control.js

浏览器输入http://localhost:3010/ 加载cache-control.html文件,该文件会请求http://localhost:3010/script.js,在url等于/script.js设置cache-control的max-age进行浏览器缓存

const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
 console.log('request url: ', request.url);
 if (request.url === '/') {
 const html = fs.readFileSync('./example/cache/cache-control.html', 'utf-8');
 response.writeHead(200, {
 'Content-Type': 'text/html',
 });
 response.end(html);
 } else if (request.url === '/script.js') {
 response.writeHead(200, {
 'Content-Type': 'text/javascript',
 'Cache-Control': 'max-age=200'
 });
 response.end("console.log('script load')");
 }
}).listen(port);
console.log('server listening on port ', port);
  • 第一次运行

浏览器运行结果,没有什么问题,正常响应

基于http协议讲解缓存头Cache-Control在服务中的应用

控制台运行结果

基于http协议讲解缓存头Cache-Control在服务中的应用

  • 修改cache-control.js返回值
...
response.writeHead(200, {
 'Content-Type': 'text/javascript',
 'Cache-Control': 'max-age=200'
});
response.end("console.log('script load !!!')");
...
  • 中断上次程序,第二次运行

浏览器运营结果

第二次运行,从memory cahce读取,浏览器控制台并没有打印修改过的内容

基于http协议讲解缓存头Cache-Control在服务中的应用

控制台运营结果

指请求了/ 并没有请求 /script.js

基于http协议讲解缓存头Cache-Control在服务中的应用

以上结果浏览器并没有返回给我们服务端修改的结果,这是为什么呢?是因为我们请求的url/script.js没有变,那么浏览器就不会经过服务端的验证,会直接从客户端缓存去读,就会导致一个问题,我们的js静态资源更新之后,不会立即更新到我们的客户端,这也是前端开发中常见的一个问题,我们是希望浏览器去缓存我们的静态资源文件(js、css、img等)我们也不希望服务端内容更新了之后客户端还是请求的缓存的资源, 解决办法也就是我们在做js构建流程时,把打包完成的js文件名上根据它内容hash值加上一串hash码,这样你的js文件或者css文件等内容不变,这样生成的hash码就不会变,反映到页面上就是你的url没有变,如果你的文件内容有变化那么嵌入到页面的文件url就会发生变化,这样就可以达到一个更新缓存的目的,这也是目前前端来说比较常见的一个静态资源方案。

作者:五月君

链接:https://www.imooc.com/article/72190

相关推荐