本文介绍在使用 jQuery .load() 定期刷新页面区域时，因浏览器或服务器端缓存导致新内容不生效的问题，并提供可靠、通用的缓存绕过（cache-busting）解决方案。
本文介绍在使用 jquery `.load()` 定期刷新页面区域时，因浏览器或服务器端缓存导致新内容不生效的问题，并提供可靠、通用的缓存绕过（cache-busting）解决方案。
在构建实时仪表盘类 Web 应用时，常见做法是通过定时 AJAX 请求（如 jQuery 的 .load()）周期性拉取最新 HTML 片段并注入指定容器（如 <div id="main">）。但开发者常遇到一个典型问题：首次加载正常，后续服务端文件（如 new-content.php）已更新，前端却始终显示旧内容——这并非逻辑错误，而是HTTP 缓存机制在“默默干预”。
根本原因在于：浏览器（及部分服务器，如 Flask 默认开发服务器）会为相同 URL 的 GET 请求启用缓存。当 $('#main').load('new-content.php #main') 被反复调用时，请求 URL 始终不变，浏览器可能直接返回缓存响应，跳过真实网络请求；即使 Flask 未显式配置缓存，其开发服务器默认也可能对静态响应做轻量缓存，加剧该现象。
✅ 推荐解决方案：添加时间戳参数（Cache Buster）
通过为每次请求生成唯一查询参数（如毫秒级时间戳），强制 URL 变化，从而绕过缓存：
function updateMain() {
setTimeout(function() {
console.log("updating");
const cacheBuster = new Date().getTime();
// 关键：将时间戳作为查询参数附加到 URL 后
$('#main').load(`new-content.php?cb=${cacheBuster} #main`, function() {
updateMain(); // 递归调用下一轮
});
}, 3000);
}
updateMain();⚠️ 注意事项：
- URL 拼接顺序：确保 ?cb=... 出现在片段选择器 #main 之前（即 new-content.php?cb=123 #main），否则 jQuery 会误解析为无效 URL。
- 服务端兼容性：该参数仅用于打破缓存，new-content.php 无需处理它（可忽略），但需确保 PHP 脚本本身不输出 Cache-Control: public 或长时效 Expires 头。
-
更健壮的替代方案（进阶）：若需彻底禁用客户端缓存，可在 AJAX 配置中全局设置：
$.ajaxSetup({ cache: false // 自动为所有 jQuery AJAX 请求添加时间戳参数 });此后 $('#main').load('new-content.php #main') 即可免手动加参，但需注意它会影响全部 AJAX 请求。
? 总结：缓存是提升性能的利器，但在实时数据场景下需主动管理。使用时间戳缓存粉碎（cache busting）是最简单、跨浏览器兼容的实践方式。结合服务端响应头优化（如设置 Cache-Control: no-cache），即可确保仪表盘内容毫秒级同步更新。
