缓存

按缓存位置分类，优先级从上到下，找不到则继续往下找

• Service Worker
• Memory Cache：内存中的缓存
• Disk Cache：硬盘中的缓存
• 网络请求

Memory Cache

浏览器的缓存，短期缓存，一般在tab关闭之后就失效，有时候如果此类缓存过多的话，有些前面的缓存就会被先失效掉了。

匹配规则

• url匹配：保证了一个页面中两个相同的请求(img的src相同，link的href相同)都实际只被请求一次。

<link rel="preload">

预加载本质上就是在网络请求空闲的时候，将内容加到Memory Cache中。

• 除了url完全通向匹配，还会比对类型，CORS中的域名规则。因此一个作为脚本 (script) 类型被缓存的资源是不能用在图片 (image) 类型的请求中的，即便他们 src 相等。
• 浏览器会忽略max-age=0，no-cache等常见的忽略缓存的请求头，让Memory Cache有效。如果要完全不缓存，可使用no-store，让Memory Cache也失效。

Disk Cache

Disk Cache就是我们常见常说的HTTP Cache，顾名思义就是存在硬盘上的缓存，持久存储，可以自定义策略，决定缓存的策略，例如哪些要缓存，哪些不缓存，哪些某段时间要失效，哪些是仍然可用。

持久化存储，硬盘爆炸？

浏览器清理的时候，会有神秘伟大的算法把最老的和最可能过时的资源删除（LRU策略？不确定），各个浏览器识别的算法不都相同，存在差异，但基本都有对应实现，不然我们的电脑就爆炸了。

Service Worker

Service Worker是让开发者有更高的自由度可以去操作缓存方面的东西，且是持久性存储，从缓存定位的优先级来看，它是最高的，我们可以通过对应的api去自定义哪些缓存存在此处。详细的api见MDN

Service Worker缓存的东西存在哪呢

Service Worker 能够操作的缓存是有别于浏览器内部的 memory cache 或者 disk cache 的。我们可以从 Chrome 的 F12 中，Application -> Cache Storage 找到这个单独的缓存位置。除了位置不同之外，这个缓存是永久性的，即关闭 TAB 或者浏览器，下次打开依然还在(而 memory cache 不是)。有两种情况会导致这个缓存中的资源被清除：手动调用 API cache.delete(resource) 或者容量超过限制，被浏览器全部清空。

总结缓存位置分类下的查找缓存过程：

• 根据 Service Worker 中的 handler 决定是否存入 Cache Storage (额外的缓存位置)。
• 根据 HTTP 头部的相关字段(Cache-control, Pragma 等)决定是否存入 disk cache
• memory cache 保存一份资源 的引用，以备下次使用。

按失效策略分类