ServiceWorker 缓存与 HTTP 缓存

最新推荐文章于 2024-04-27 23:34:13 发布

VIP文章 web老猴子

最新推荐文章于 2024-04-27 23:34:13 发布

阅读量1.8k

点赞数 1

文章标签：缓存 http chrome

本文链接：https://blog.csdn.net/web220507/article/details/125274811

版权

虽然 ServiceWorker 和 PWA 正在成为现代 Web 应用程序的标准，但浏览器资源缓存变得比以往任何时候都复杂。
本文涵盖了浏览器缓存的重点内容，具体包括：

我们先来看标准定义的资源请求遵循的顺序：

缓存流

ServiceWorker 缓存：ServiceWorker 检查资源是否存在其缓存中，并根据其编程的缓存策略决定是否返回资源。这个操作不会自动发生，需要在注册的 ServiceWorker 中定义 fetch 事件去拦截并处理网络请求，这样才能命中 ServiceWorker 缓存而不是网络或者 HTTP 缓存。
HTTP 缓存：这里就是我们常常说的「强缓存」和「协商缓存」，如果 HTTP 缓存未过期的话，浏览器就会使用 HTTP 缓存的资源。
服务器端：如果 ServiceWorker 缓存或者 HTTP 缓存中未找到任何资源，则浏览器会向网络请求资源。这里就会涉及到 CDN 服务或者源服务的工作了。

这是标准定义的资源请求流程，但是有追求的浏览器还会在 ServiceWorker 上面加一层 「内存缓存层」 ，以 Chrome 为例，我们请求一个资源，除去网络，会有三种浏览器缓存返回：

那么 MemoryCache 和 DiskCache 与 ServiceWorker Cache 的优先级是怎么样的呢？
下面我们讲讲三者的区别。

我们以 Chrome 为例，MemoryCache 作为第一公民，位于 ServiceWorker 之上。
也就是命中了 MemoryCache，就不会触发 ServiceWorker 的 fetch 事件。
而 DiskCache 则位于原来的 HTTP 缓存层：

关注