使用场景说明
前端部署的资源是静态文件,大致可分为两类
- html
- css、js、img、iconfont
强制缓存
对于第2类静态资源,更适用于强缓存,因为每次重复请求是很浪费网络资源,也很耗时的, 直接用缓存速度嗖嗖的,体验好啊。
如何保证此类资源更新呢?
- 前端项目构建产出文件 hash 指纹
- 构建更新 html 对其他静态资源的引用 url
这就是前端工程化方面的议题了。
协商缓存
这里说下为什么把 html 文件单独拎出来?
答: 因为 html 文件是 Web 站点的唯一入口,所有其他资源必须由html文件直接或间接引用才可以被加载;而且不管是从产品还是业务角度来讲,我们肯定希望用户访问的站点是最新的,所以必须保证 html 是最新的。这种特殊性,使得 html 文件更适合协商缓存。
nginx 例子演示
图片类资源,设置过期时间为30天
css、js等资源,设置过期时间为24小时
第一次请求示意图:
再次请求:
我们发现浏览器请求 htm 时,返回的状态码是 304,即这里 html 资源是协商缓存。
css、js 等资源则是直接从缓存中获取,可以看到 200 (from memory cache) , 这就是强缓存的体现。
有的时候还会出现 200 (from disk cache) 的情况,这其实是浏览器内部的运行机制,目前所知:
- 如果本地有缓存,当关闭浏览器后,再次打开相同链接,会从 disk 即硬盘中读取缓存。
但真正的逻辑复杂的多,在未关闭浏览器,css 资源多次请求时,css 资源也变成从 disk 中读取,所以具体要看浏览器怎么实现的了。