播面 浏览器缓存的位置有哪些？（Memory Cache vs Disk Cache）
浏览器缓存（Browser Caching）是性能优化的关键机制。当浏览器请求资源时，它会按照特定的优先级顺序查找缓存。
主要关注的 Memory Cache（内存缓存）和 Disk Cache（硬盘缓存）是浏览器缓存机制中的核心部分。
以下是详细的对比和解析：
1. 缓存查找的优先级顺序
在深入了解 Memory 和 Disk 之前，需要知道浏览器查找资源的顺序通常是这样的：
- Service Worker Cache (由开发者控制，离线缓存)
- Memory Cache (内存缓存)
- Disk Cache (硬盘缓存，也叫 HTTP Cache)
- Push Cache (HTTP/2 推送缓存，存活时间极短，较少提及)
- Network (网络请求)
2. Memory Cache（内存缓存）
Memory Cache 是指存在于计算机内存（RAM）中的缓存。
- 特点：
- 速度最快： 读取内存的速度远远快于硬盘。
- 时效性短： 它是非持久化的。一旦你关闭了 Tab 页（标签页）或者关闭了浏览器，内存中的缓存就会被释放。
- 容量小： 操作系统分配给浏览器的内存是有限的，不能无限存储。
- 存储内容：
- 通常存储当前页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。
- 浏览器会根据计算机当前的内存使用率（Free RAM）来决定是否存入 Memory Cache。
- 触发场景：
- 当你刷新页面（F5）时，如果 Tab 页没关，浏览器会优先从 Memory Cache 中读取很多资源（你会看到 Network 面板中显示
from memory cache）。 <link rel="preload">预加载的资源通常也会进入内存。
- 当你刷新页面（F5）时，如果 Tab 页没关，浏览器会优先从 Memory Cache 中读取很多资源（你会看到 Network 面板中显示
3. Disk Cache（硬盘缓存）
Disk Cache 是指存在于计算机硬盘（HDD 或 SSD）中的缓存。
- 特点：
- 容量大： 硬盘空间通常很大，可以存储大量文件。
- 持久存储： 即使关闭浏览器或重启电脑，缓存依然存在（直到过期或被清理）。
- 速度较慢： 读取速度比内存慢，但比网络请求快得多。
- 存储内容：
- 绝大部分的静态资源（CSS, JS, 图片等）。
- 浏览器会根据 HTTP 响应头（如
Cache-Control,Expires等）来决定哪些资源存入硬盘，以及存多久。
- 触发场景：
- 当你关闭 Tab 页后重新打开，或者在地址栏回车访问时，Memory Cache 已经清空，浏览器会去 Disk Cache 查找资源（Network 面板显示
from disk cache）。
- 当你关闭 Tab 页后重新打开，或者在地址栏回车访问时，Memory Cache 已经清空，浏览器会去 Disk Cache 查找资源（Network 面板显示
4. Memory Cache vs Disk Cache 对比表
| 特性 | Memory Cache (内存缓存) | Disk Cache (硬盘缓存) |
|---|---|---|
| 存储位置 | RAM (内存) | Hard Drive (硬盘) |
| 读取速度 | 极快 (0ms 级别) | 快 (几毫秒到十几毫秒) |
| 容量限制 | 小 (受限于可用内存) | 大 (受限于硬盘空间) |
| 持久性 | 差 (Tab 关闭即失效) | 强 (长期存储) |
| 控制权 | 浏览器自动管理 (黑盒) | 可通过 HTTP Header 控制 |
| 适用场景 | 当前会话频繁使用的资源 | 跨会话、大文件、长期资源 |
5. 浏览器是如何决定存哪里的？
这是一个比较复杂的内部机制（Heuristic），不同的浏览器（Chrome, Firefox, Safari）策略略有不同，但通常遵循以下规律：
- 大文件 vs 小文件：
- 大文件通常直接扔进 Disk Cache，因为内存太贵重了。
- 小文件可能先在内存，也可能在硬盘。
- 内存使用率：
- 如果当前系统内存紧张，浏览器会倾向于不存 Memory Cache，或者快速清理 Memory Cache。
- 资源类型：
- Base64 图片：通常直接在内存里（因为它们是作为字符串解析在 DOM 里的）。
- 隐私模式：通常不使用 Disk Cache，只使用 Memory Cache（为了关闭后不留痕迹）。
6. 用户行为对缓存的影响
用户的操作会直接决定浏览器去哪里找缓存：
- 地址栏回车 / 点击链接 / 打开新窗口：
- 查找顺序：Disk Cache -> Network。
- (因为是新开的，内存里没有数据)。
- F5 普通刷新 (Refresh)：
- 查找顺序：Memory Cache -> Disk Cache -> Network。
- (因为 Tab 没关，内存里还有旧数据，优先用内存)。
- Ctrl + F5 强制刷新 (Hard Reload)：
- 不使用任何缓存。
- 浏览器会在请求头添加
Cache-Control: no-cache，强制从服务器拉取最新数据。
总结
- Memory Cache 是为了当前会话的极致速度体验（比如你频繁刷新页面）。
- Disk Cache 是为了跨会话的加载速度（比如你明天再来访问这个网站）。
在 Chrome 开发者工具的 Network 面板中，你可以通过 Size 列清晰地看到资源是来自 (memory cache) 还是 (disk cache)。