js 浏览器缓存机制

封面图 • 2025-09-30 • JavaScript

JavaScript（JS）在浏览器中运行时，虽然不能直接操作浏览器的缓存机制，但可以通过一些方式**间接地利用或控制缓存**。浏览器缓存主要由 HTTP 协议中的缓存策略决定，而 JavaScript 可以通过以下几种方式与缓存交互：

---

## 一、浏览器缓存机制概述

浏览器缓存是浏览器为了提高性能，将资源（如 HTML、CSS、JS、图片等）保存到本地，避免重复下载。

### 缓存类型：
1. **HTTP 缓存（强缓存 & 协商缓存）**
2. **LocalStorage / SessionStorage**
3. **IndexedDB**
4. **Service Workers（PWA）**

---

## 二、HTTP 缓存机制（重点）

HTTP 缓存分为两种类型：

### 1. 强缓存（Cache-Control）
- 浏览器根据响应头中的 `Cache-Control` 或 `Expires` 决定是否使用缓存。
- 如果命中强缓存，不会发送请求到服务器。

#### 常见字段：
- `Cache-Control: max-age=60`：缓存有效期为 60 秒
- `Cache-Control: no-cache`：不使用缓存，每次都要验证
- `Cache-Control: no-store`：不缓存任何内容
- `Cache-Control: public`：可以被所有用户缓存
- `Cache-Control: private`：只能被用户浏览器缓存

> 💡 **注意**：`no-cache` 并不是“不缓存”，而是“需要和服务器确认是否可用”。

---

### 2. 协商缓存（Conditional Request）
如果强缓存失效，浏览器会向服务器发送请求，并带上 `If-Modified-Since` 或 `If-None-Match` 等字段。

- 服务器返回 `304 Not Modified`，表示使用缓存。
- 返回 `200 OK`，表示更新资源。

#### 常见字段：
- `Last-Modified`
- `ETag`

---

## 三、JavaScript 如何影响缓存？

虽然 JS 本身不能直接修改缓存行为，但可以通过以下方式**间接控制缓存策略**：

### 1. 使用 `Cache-Control` 控制资源缓存
在服务器端设置响应头：
```http
Cache-Control: max-age=3600, public
```

### 2. 动态添加版本号（URL 拼接）
防止浏览器使用旧缓存：
```javascript
const scriptUrl = '/script.js?v=' + new Date().getTime();
```

### 3. 使用 `localStorage` 和 `sessionStorage`
这些是客户端存储机制，不是真正的缓存，但常用于存储数据：

```javascript
// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');
```

> ⚠️ 注意：这些存储的数据不会自动过期，需要手动管理。

### 4. 使用 IndexedDB（更复杂的本地数据库）
适用于存储大量结构化数据，支持持久化存储。

### 5. Service Workers（PWA）
可以完全控制缓存行为，实现离线访问。

```javascript
// 示例：注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service Worker 注册成功:', registration);
  }).catch(function(error) {
    console.log('Service Worker 注册失败:', error);
  });
}
```

在 `sw.js` 中可以定义缓存策略：

```javascript
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
```

---

## 四、常见问题与调试技巧

### 1. 如何强制刷新缓存？
- 在 Chrome 中按 `Ctrl + F5`（Windows）或 `Cmd + Shift + R`（Mac）进行硬刷新。
- 开发者工具中勾选 “Disable cache”（禁用缓存）。

### 2. 查看缓存状态
- 打开开发者工具 → Network → 切换到 "Headers" 标签页，查看响应头中的 `Cache-Control`、`ETag`、`Last-Modified` 等信息。

---

## 五、总结

| 机制 | 是否可由 JS 直接控制 | 说明 |
|------|------------------------|------|
| HTTP 缓存（强/协商） | ❌ | 需要服务器设置响应头 |
| LocalStorage / SessionStorage | ✅ | 客户端存储，非真正缓存 |
| IndexedDB | ✅ | 客户端数据库，可持久化 |
| Service Worker | ✅ | 完全控制缓存策略 |

---

如果你有具体场景（比如如何让 JS 控制资源缓存、如何优化加载速度等），欢迎继续提问！