浏览器缓存的主动控制

浏览器缓存是Web性能优化的重要手段，它通过存储资源副本减少网络请求，提升页面加载速度。在JavaScript BOM(Browser Object Model)和浏览器特性中，缓存控制是一个关键话题。

浏览器缓存主要分为以下几种类型：

强缓存：直接从本地读取资源，不发送请求到服务器
协商缓存：向服务器发送请求验证资源是否过期
Service Worker缓存：通过JavaScript控制的更精细缓存策略

缓存控制头字段

通过HTTP响应头可以控制缓存行为，主要字段包括：

javascript 复制代码

// 服务器设置响应头示例
response.setHeader('Cache-Control', 'max-age=3600'); // 1小时有效期
response.setHeader('ETag', '资源唯一标识符');

常用缓存控制指令：

max-age：资源有效期（秒）
no-cache：强制协商缓存
no-store：完全不缓存
public/private：指定是否可被代理服务器缓存

JavaScript主动控制缓存

1. 强制刷新缓存

javascript 复制代码

// 通过URL添加时间戳或随机数绕过缓存
const url = 'api/data?_=' + Date.now();
fetch(url).then(/*...*/);

// 或者使用location.reload强制刷新
location.reload(true); // 参数true表示绕过缓存

2. 使用Service Worker精细控制

javascript 复制代码

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(/*...*/);
}

// sw.js中实现缓存策略
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

3. 操作localStorage/sessionStorage

javascript 复制代码

// 存储数据
localStorage.setItem('cachedData', JSON.stringify(data));

// 读取数据
const data = JSON.parse(localStorage.getItem('cachedData'));

// 清除特定缓存
localStorage.removeItem('cachedData');

缓存更新策略

版本控制：通过修改文件名或添加查询参数实现缓存更新
html 复制代码
```
<script src="app.js?v=1.2.3"></script>
```
内容哈希：基于文件内容生成哈希值作为文件名
html 复制代码
```
<script src="app.a1b2c3d4.js"></script>
```
应用缓存清单（已废弃，不推荐使用）

实际应用建议

静态资源：设置较长的max-age，通过文件名变化更新
动态内容：使用no-cache或较短的max-age
敏感数据：使用no-store避免缓存
API响应：合理设置Cache-Control和ETag

调试缓存问题

开发者工具中：

Network面板查看请求的缓存状态
Application面板查看各种存储和缓存内容
使用Clear site data功能全面清除缓存

通过主动控制浏览器缓存，开发者可以在提升性能的同时确保用户获取最新内容，这是现代Web开发中不可或缺的技能。