传送门
- 面试总结(1):HTML布局、CSS选择器及JS基础综合能力知识点
- 算法基础:数组flat、去重及排序
- React Vue 理解及基础知识
- 跨域问题解决方案
- http协议状态码
- 缓存及更新问题
- webview与原生应用交互
- 服务器端知识
推荐一篇我觉得写得非常不错的关于理解浏览器缓存机制的文章, 里面还有关于缓存应用场景的分析, 我就不写很多废话去误导大家了哈.
贴链接的行为如果涉及侵权请指出.
下面是我自己的整理出来的一些核心速览内容:
1. 从储存位置看缓存
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
Service Worker 的缓存与浏览器其他内建的缓存机制不同,它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的。
PWA和实现也和这个有关哦. Memory Cache 与 Disk Cache 前者读取速度快, 后者胜在容量.
Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右
2. 从缓存过程看缓存
- 强缓存
- 协商缓存
某个请求如果之前的 response.headers
中有设置Expires
(http 1.0)或者Cache-Control
(http 1.1)内容, 就可能触发缓存, 在资源过期之前, 就会命中缓存.
如果缓存过期了, 就会触发协商缓存, 此时就会发送http请求服务器, 询问关于资源的更新情况, 浏览器会带上之前发送请求收到的 Last-Modified 这个header,将其添加为 If-Modified-Since 的值. 或者将ETag 的值赋值给 If-None-Match 这个header. 两者的区别就是前者是http 1.0的产物, 基于时间验证, 但是有很多隐藏的问题会导致缓存更新有bug, 所以用 http 1.1 出了新规则去解决这个问题, ETag 是当前资源文件的一个唯一标识(由服务器生成),只要资源有变化,Etag 就会重新生成.
如果上述比较表示缓存依旧有效, 会返回304, 并命中缓存. 否则返回200, 并更新缓存.