浏览器的缓存机制

原创于 2025-06-16 07:26:52 发布 · 606 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#缓存 #面试 #前端

前端面试题专栏收录该内容

30 篇文章

订阅专栏

一、缓存的本质：减少网络请求的资源复用

浏览器缓存是指浏览器将用户请求过的资源（如 HTML、CSS、JS、图片等）存储在本地，当再次请求相同资源时，直接从本地读取而无需重新发送网络请求。其核心目标是降低服务器负载、减少网络延迟、提升用户体验。

二、缓存的分类：强缓存与协商缓存

浏览器缓存策略主要通过 HTTP 头部字段 控制，分为两种类型，其流程如下：

1. 强缓存（本地直接读取，不发请求到服务器）

当浏览器请求资源时，先检查本地缓存是否存在且未过期，若满足则直接使用缓存，无需与服务器通信。

关键头部字段：
- Cache-Control（HTTP/1.1 标准）：
  - max-age=秒数：资源在本地缓存的最大有效时间（如 max-age=31536000 表示缓存 1 年）。
  - public：资源可被客户端和代理服务器缓存。
  - private：资源仅可被客户端缓存（如用户登录信息）。
  - no-cache：并非禁止缓存，而是要求使用前必须经服务器验证（实际触发协商缓存）。
  - no-store：禁止任何形式的缓存，每次请求都强制从服务器获取。
- Expires（HTTP/1.0 兼容）：资源过期的具体时间点（如 Expires: Thu, 31 Dec 2025 23:59:59 GMT），优先级低于 Cache-Control。

2. 协商缓存（服务器验证缓存有效性）

当强缓存过期或被禁用时，浏览器向服务器发送请求，验证缓存是否仍可使用。若有效，服务器返回 304 状态码，浏览器使用本地缓存；否则返回新资源。

关键头部字段：
- Last-Modified & If-Modified-Since：
  - Last-Modified：服务器返回资源的最后修改时间（如 Last-Modified: Mon, 15 Jun 2025 10:00:00 GMT）。
  - If-Modified-Since：浏览器请求时携带的字段，值为之前获取的 Last-Modified，服务器对比时间判断资源是否更新。
- Etag & If-None-Match：
  - Etag：服务器为资源生成的唯一哈希值（如 Etag: "5f9e9e1b-1234"），基于资源内容生成，比时间更精确。
  - If-None-Match：浏览器请求时携带的字段，值为之前获取的 Etag，服务器对比哈希值判断资源是否更新。
- 优先级：Etag > Last-Modified（因 Last-Modified 只能精确到秒级，且资源修改但时间未变时无法识别）。

三、缓存的存储位置：内存与磁盘

浏览器获取资源后，会根据资源类型和策略决定存储位置：

内存缓存：
- 特点：读取速度极快，但生命周期短（浏览器关闭或标签页关闭时释放）。
- 存储资源：脚本（JS）、字体、小图片等高频访问的资源。
磁盘缓存：
- 特点：读取速度较慢，但持久化存储（关闭浏览器后仍保留）。
- 存储资源：大文件（如视频、大型图片）、样式表（CSS）等不常更新的资源。
查看方式：
在 Chrome 开发者工具的 Network 面板中，Size 列显示 from disk cache 或 from memory cache。

四、缓存的控制场景与最佳实践

1. 不同资源的缓存策略

资源类型	缓存策略	示例头部配置
HTML 页面	不建议强缓存（需频繁更新）	`Cache-Control: no-cache, no-store, must-revalidate`
CSS/JS/ 字体	强缓存（长期有效）	`Cache-Control: max-age=31536000, public`（1 年），配合版本号（如 `app.v1.js`）
图片 / 视频	强缓存（根据更新频率设置）	频繁更新的图片：`max-age=86400`（1 天）；静态资源：`max-age=31536000`
用户数据	禁止缓存	`Cache-Control: no-store`

2. 避免缓存导致的更新延迟

版本号策略：
在资源 URL 中添加版本号或哈希值（如 style.css?v=20250616 或 style.abc123.css），内容更新时改变 URL，强制浏览器加载新资源。
协商缓存兜底：
对强缓存的资源同时设置 Etag，确保版本号未更新但内容变化时能通过协商缓存获取新资源。

3. 用户行为对缓存的影响

普通刷新（F5）：跳过强缓存，直接触发协商缓存（发送 If-None-Match/If-Modified-Since）。
强制刷新（Ctrl+F5）：跳过所有缓存，强制从服务器获取资源（发送 Cache-Control: no-cache）。

五、HTTP/2 与 Service Worker 对缓存的优化

HTTP/2 缓存增强：
- 支持二进制分帧和头部压缩，减少缓存验证时的网络开销。
- 多路复用允许并行请求，缓存资源的复用效率更高。

Service Worker 缓存（PWA 技术）：

提供更灵活的缓存控制（如自定义缓存策略、离线访问），通过 Cache API 和 Fetch Event 实现：

// Service Worker 中缓存资源
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request).then(res => {
        // 缓存新资源
        const cacheCopy = res.clone();
        caches.open('my-cache').then(cache => cache.put(event.request, cacheCopy));
        return res;
      });
    })
  );
});

六、缓存调试与问题排查

开发者工具查看：
- 在 Chrome 的 Network 面板中，勾选 Disable cache 可临时禁用缓存，方便调试。
- 查看 Status 列：200 (from cache) 表示使用强缓存，304 Not Modified 表示协商缓存生效。
服务器配置验证：
- 使用 curl -I URL 命令查看响应头部，确认 Cache-Control、Etag 等字段是否正确设置：
```
curl -I https://example.com/style.css
# 输出示例：
# Cache-Control: max-age=31536000, public
# Etag: "5f9e9e1b-1234"
```