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

5,166 阅读2分钟

传送门

推荐一篇我觉得写得非常不错的关于理解浏览器缓存机制的文章, 里面还有关于缓存应用场景的分析, 我就不写很多废话去误导大家了哈.

深入理解浏览器的缓存机制 ---- 浪里行舟

贴链接的行为如果涉及侵权请指出.

下面是我自己的整理出来的一些核心速览内容:

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, 并更新缓存.