先思考两个问题?
- 在页面中引入静态资源文件，为什么静态资源文件改变后，再次发起请求还是之前的内容，没有变化呢？
- 在使用webpack等一些打包工具时，为什么要加上一串hash码？
缓存头Cache-Control的一些特性
可缓存性
- public http经过的任何地方都可以进行缓存
- private 只有发起请求的这个浏览器才可以进行缓存
- no-cache 任何一个节点都不可以缓存
到期
- max-age=
设置缓存到多少秒过期 - s-maxage=
会代替max-age，只有在代理服务器才会生效 - max-stale=
是发起请求方主动带起的一个头，是代表即便缓存过期，但是在max-stale这个时间内还可以使用过期的缓存，而不需要愿服务器请求新的内容
重新验证
- must-revalidate 如果max-age设置的内容过期，必须要向服务器请求重新获取数据验证内容是否过期
- proxy-revalidate 主要用在缓存服务器，指定缓存服务器在过期后重新从原服务器获取，不能从本地获取
其它
- no-store 本地和代理服务器都不可以存储这个缓存，永远都要从服务器拿body新的内容使用
- no-transform 主要用于proxy服务器，告诉代理服务器不要随意改动返回的内容
示例
- cache-control.html
cache-control
- 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就会发生变化，这样就可以达到一个更新缓存的目的，这也是目前前端来说比较常见的一个静态资源方案。
閱讀更多 慕課網 的文章
關鍵字: CSS JavaScript 服务器
