chrome 因缓存机制可能持续显示旧版 html 页面，即使服务器文件已更新；本文提供无需清空浏览器历史的可靠解决方案，包括 http 缓存头配置与文件名策略。
当您通过 Hostinger 等共享主机成功上传新版 HTML、CSS 或 JavaScript 文件后，Chrome 却仍显示旧内容，而 Edge、Firefox 甚至手机 Safari 却能正常加载——这通常不是上传失败，而是浏览器（及中间代理）对静态资源实施了强缓存（Strong Caching）。由于您的网站是纯前端（无服务端动态渲染），HTTP 响应头默认未明确控制缓存行为，导致 Chrome 遵循其保守策略：复用本地缓存副本，跳过重新请求。
✅ 推荐方案：通过 .htaccess 设置 Cache-Control（最规范、可扩展）
Hostinger 支持 Apache 服务器，您可在网站根目录（如 public_html/）中创建或编辑 .htaccess 文件，强制为关键文件设定合理的缓存策略：
# 禁用 HTML 页面缓存（确保每次获取最新版本） <Files "index.html"> Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0" </Files> # 或更通用方式：对所有 .html 文件生效 <FilesMatch "\.html$"> Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0" </FilesMatch> # 对 CSS/JS 文件可启用短期缓存 + 版本化（推荐长期方案） <FilesMatch "\.(css|js)$"> Header set Cache-Control "public, max-age=3600" </FilesMatch>
⚠️ 注意事项：
- 确保 Hostinger 启用了 mod_headers 和 mod_rewrite（绝大多数共享主机默认开启）；
- 保存后需等待约 1–2 分钟生效（部分 CDN 或代理层有短暂延迟）；
- 修改后可用 Chrome DevTools（Network → 刷新页面 → 查看 index.html 的 Response Headers）验证 Cache-Control 是否已生效。
✅ 备选方案：URL 版本化（简单有效，适合快速验证）
若暂无法配置 .htaccess，可在 HTML 中通过查询参数“欺骗”浏览器：
<!-- 在 index.html 中引入 CSS/JS 时添加时间戳或版本号 --> <link rel="stylesheet" href="style.css?v=1.0.3"> <script src="script.js?v=20240520"></script>
每次更新文件时修改 v= 后的值（如时间戳 ?v=202405201430），即可绕过缓存。注意：此法仅对 <link>/<script> 有效，不能解决 index.html 自身被缓存的问题——因此仍建议配合上述 .htaccess 设置。
❌ 不推荐方案：重命名 index.html → index.htm
原答案中建议将 index.html 改为 index.htm 虽然能临时触发新请求（因 URL 变更），但存在明显缺陷：
- 破坏语义惯例与 SEO 友好性（.html 是标准扩展名）；
- 若服务器未配置 index.htm 为默认索引文件，将直接返回 403 错误；
- 无法解决深层页面（如 /about.html）的缓存问题；
- 属于“治标不治本”的权宜之计，不具可维护性。
✅ 最终建议：组合使用 + 验证
- 立即生效：部署 .htaccess 强制 index.html 不缓存；
- 长期优化：对 CSS/JS 启用带哈希的文件名（如 style.a1b2c3.css）+ 长期缓存（max-age=31536000），实现“缓存永不失效”；
- 开发阶段辅助：Chrome 中按 Ctrl+Shift+R（Windows/Linux）或 Cmd+Shift+R（Mac）执行硬性重载（忽略缓存），快速验证改动。
缓存不是敌人，而是性能基石；关键在于主动声明意图——告诉浏览器“这个 HTML 必须每次都校验新鲜度”。掌握这一原则，您就能彻底告别“改了代码却看不到效果”的困扰。
