Cache-Control（缓存）入门

Veröffentlicht am

1. 性能优化

想让哪个文件被缓存（如js文件、css文件等），就在服务器里的路由里写上

1
response.setHeader('Cache-Control', 'max-age=30')

这样每次浏览器请求完这个url后的30s内，都不会再请求这个文件，提升了速度。
但只要改变url，文件就会被再请求一次

2. html不要设置Cache-Control

因为html若设置了缓存，浏览器就不会向服务器发送任何请求，这样用户无法获取到任何更新后的版本。
若是css、js这类文件更新了，可以通过改变url来使用户获取到更新，例如

1
2
3
4
5
6
7
<script src="main.js"></script>  //第一个版本

<script src="main.js?v=2"></script>    //第二个版本，改变url，加了个查询参数，于是浏览器就会重新请求文件了

<script src="main.js?v=3"></script>   //第三个版本

<script src="main.js?随机数"></script>   //以后的版本

3. 旧版本的缓存(Expires)

1
response.setHeader('Expirse', 'Feb 2018 14:04:04.....')

区别：Expires设置的是日期，而且是根据本地时间判断的，若是用户的本地时间有误，就会有bug，所以现在都用Cache-Control，若两个都设置了会优先使用Cache-Control，因为这是新版的