点滴生活

Appearance

浏览器如何刷新 ​

1. 修改资源 URL（最推荐） ​

通过添加 版本号/哈希值 到资源文件名或参数中，确保每次更新后 URL 变化，强制绕过缓存。
实现方式：

  • 构建工具自动添加哈希（如 Webpack/Vite/Rollup）：
    js
    // webpack.config.js
output: {
  filename: '[name].[contenthash].js', // 生成如 main.a3b4c5.js
}
  • 手动添加查询参数（适用于静态资源）：
    html
    <script src="/app.js?v=1.0.1"></script>
<!-- 更新时修改版本号 -->

2. 服务端配置缓存策略 ​

通过 HTTP 响应头控制缓存行为：

  • 禁用缓存（开发环境适用）：
    http
    Cache-Control: no-store, no-cache, must-revalidate
Expires: 0
Pragma: no-cache
  • 设置短缓存时间（生产环境推荐）：
    http
    Cache-Control: max-age=3600, must-revalidate

3. 前端代码手动触发刷新 ​

在检测到更新时，通过以下方式强制刷新：

  • 普通页面：
    js
    window.location.reload(true); // 参数 true 强制跳过缓存（但部分浏览器已废弃此特性）
  • 单页应用（SPA）：
    js
    // 先清除缓存再刷新
caches.keys().then(cacheNames => {
  cacheNames.forEach(name => caches.delete(name));
  window.location.href = '/'; // 或使用路由跳转
});

4. Service Worker 控制缓存 ​

适用于 PWA 或需要精细控制缓存的场景：

  • 监听更新并提示用户：
    js
    // sw.js
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => {
  caches.delete('old-cache-name');
  clients.claim(); // 立即控制所有页面
});
  • 前端检测更新：
    js
    navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {
    const newWorker = reg.installing;
    newWorker.addEventListener('statechange', () => {
      if (newWorker.state === 'installed') {
        alert('新版本已就绪，请刷新！');
      }
    });
  });
});

5. 清除本地存储（极端情况） ​

如果缓存问题依然存在，可尝试清除所有可能的存储：

js
// 清除 localStorage、sessionStorage、IndexedDB 等
localStorage.clear();
sessionStorage.clear();
indexedDB.deleteDatabase('dbName');
// 然后刷新页面
window.location.href = window.location.href + '?nocache=' + Date.now();

6. 浏览器开发者工具临时解决方案 ​

  • 手动操作：
    • Chrome 开发者工具 → Network → 勾选 Disable cache。
    • 强制刷新：Ctrl + Shift + R（Windows）或 Cmd + Shift + R（Mac）。

最佳实践建议 ​

  1. 生产环境：使用 文件名哈希 + 合理的 Cache-Control 头（如 max-age=31536000, immutable 对哈希资源长期缓存）。
  2. 开发环境：禁用缓存或使用 vite/server 的热更新功能。
  3. 紧急修复：通过修改 URL 或服务端推送更新通知（如 WebSocket）。

⚠️ 注意：避免滥用 no-store 或 no-cache，否则会影响性能。