浏览器缓存（Service Worker、Memory Cache、disk Cache、强缓存、协商缓存、Ctr F5、Disable Cache、强缓存假象）详解

最新推荐文章于 2025-02-27 14:22:47 发布

YF-SOD

最新推荐文章于 2025-02-27 14:22:47 发布

阅读量2.7k

点赞数 27

分类专栏：计算机网络知识 # 浏览器存储文章标签：强缓存假象浏览器缓存机制详解强缓存和协商缓存、缓存流程缓存标志优先级、请求流程浏览器不走缓存的方法详解

本文链接：https://blog.youkuaiyun.com/AIWWY/article/details/135633330

版权

浏览器缓存

浏览器在本地磁盘对用户最近请求过的文档（文件）进行存储（缓存），以便在下一次访问时重复使用，即当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档，从而节省带宽、提升访问速度、降低服务器压力。

缓存种类

浏览器缓存按位置分类有3种，它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)

Service Worker
Memory Cache
Disk Cache
网络请求

我们可以在 Chrome 的开发者工具中F12，Network -> Size 一列看到一个请求最终的处理方式：如果是大小 (多少 K，多少 M 等) 就表示是网络请求，否则会列出 from memory cache, from disk cache 和 from ServiceWorker。

按缓存方式分类有2种

1.强制缓存（强缓存）

2.协商缓存（对比缓存）

Service Worker

一种在浏览器后台运行的JavaScript脚本，它可以拦截和处理网页发出的网络请求，以及管理缓存和离线数据。Service Worker可以让网页在离线状态下仍能正常访问，并且可以提高网页的性能和响应速度。它由开发者编写的额外的脚本控制，且缓存位置独立。

可以在 F12 中的Application下看到

Service Worker可以实现以下功能：

离线缓存：Service Worker可以缓存网页资源，使得用户在离线状态下仍能访问已经缓存的资源。
推送通知：Service Worker可以接收来自服务器的推送通知，并在用户离线时显示通知。
资源拦截：Service Worker可以拦截网页发出的网络请求，并根据需要返回缓存中的资源或者从服务器请求最新的资源。
跨域通信：Service Worker可以和其他域名的网页进行通信，从而实现一些跨域的功能。

如果 Service Worker 没能命中缓存，一般情况会使用 fetch() 方法继续获取资源。这时浏览器就去 memory cache 或者 disk cache 进行下一次找缓存的工作了。经过 Service Worker 的 fetch() 方法获取的资源，即便它并没有命中 Service Worker 缓存，甚至实际走了网络请求，也会标注为 from ServiceWorker。
注意：为了保证安全性，Service Worker只能在HTTPS协议下使用。

Memory Cache

内存中的缓存(与之相对 disk cache 就是硬盘上的缓存)。不受开发者控制，也不受 HTTP 协议头的约束，是一个黑盒。

几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。但是也正因为数量很大但是浏览器占用的内存不能无限扩大这样两个因素，memory cache 只能是“短期存储”。通常浏览器窗口中的一个页签TAB 关闭后该次浏览的 memory cache 便失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存)，那可能在 TAB 没关闭之前，排在前面的缓存就已经失效了。

注意：在从 memory cache 获取缓存内容时，浏览器会忽视例如 max-age=0, no-cache 等头部配置。例如页面上存在几个相同 src 的图片，即便它们可能被设置为不缓存，但依然会从 memory cache 中读取。这是因为 memory cache 只是短期使用，大部分情况生命周期只有一次浏览而已。而 max-age=0 在语义上普遍被解读为“不要在下次浏览时使用”，所以和 memory cache 并不冲突。

如果想让一个资源进入缓存，就连短期也不行，就使用 no-store。