首页手记基于http协议讲解缓存头Cache-Control在...

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

标签：

Node.js JavaScript 前端工具

先思考两个问题?

在页面中引入静态资源文件，为什么静态资源文件改变后，再次发起请求还是之前的内容，没有变化呢？
在使用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就会发生变化，这样就可以达到一个更新缓存的目的，这也是目前前端来说比较常见的一个静态资源方案。

点击查看更多内容