为了账号安全,请及时绑定邮箱和手机立即绑定

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

先思考两个问题?
  • 在页面中引入静态资源文件,为什么静态资源文件改变后,再次发起请求还是之前的内容,没有变化呢?
  • 在使用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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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);
  • 第一次运行

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

图片描述

控制台运行结果

图片描述

  • 修改cache-control.js返回值
...
response.writeHead(200, {
    'Content-Type': 'text/javascript',
    'Cache-Control': 'max-age=200'
});

response.end("console.log('script load !!!')");
...
  • 中断上次程序,第二次运行

浏览器运营结果

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

图片描述

控制台运营结果

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

图片描述

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

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消