记一次失败的 bilibili 面试总结_缓存问题

传送门

• 面试总结(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, 并更新缓存.