最简单的是meta标签定时刷新，但会丢失状态且不可控；推荐用setInterval+fetch局部更新数据，无白屏、不丢状态、更精准。
用 meta 标签最简单，但有硬伤
直接在 index.html 的 <head> 里加一行就能定时刷新，比如每 30 秒刷新一次：
<meta http-equiv="refresh" content="30">
这方法不用写 JS，兼容性极好，连 IE6 都支持。但它的问题很实在：
- 页面会完全重载，所有 JS 状态、表单输入、滚动位置全丢
- 无法控制“是否刷新”——比如用户正在填表单，你不能突然刷掉
- 如果后端接口慢或网络卡住，它照样计时、照样刷，可能刷出空白页或错误页
- SEO 不友好，搜索引擎可能认为这是跳转行为
setInterval + location.reload() 更可控
用 JS 控制刷新时机，能加条件、能取消、能提示用户：
<script>
const refreshInterval = setInterval(() => {
// 可选：检查是否有未保存的表单
if (document.querySelector('form :invalid') === null) {
location.reload();
}
}, 30000); // 每 30 秒执行一次
</script>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
setInterval返回一个 ID，需要时可用clearInterval(refreshInterval)停止（比如监听到用户聚焦输入框） -
location.reload()默认等价于location.reload(true)，即强制从服务器重新加载；若想走缓存，传false - 注意别在 SPA（如 Vue/React）里直接用
location.reload()，会破坏路由状态，应改用框架的路由刷新方式
服务端返回 Refresh 响应头也行，但不适用于纯静态 index.html
如果你用的是 Nginx、Apache 或 Node.js 后端，可以在响应中加 HTTP 头：
Refresh: 30; url=/index.html
但这对纯前端静态文件无效——浏览器读取本地 index.html 时根本没经过服务器，自然收不到这个头。只有部署在 Web 服务器上、且服务器配置了该响应头，才起作用。
常见误操作：
- 把
Refresh头写进 HTML 注释里（无效） - 以为加了
<meta>就能绕过 CORS 刷新 API 数据（不能，<meta>只刷整个页面） - 在开发时用
file://协议打开index.html，结果发现<meta>刷新不生效（部分浏览器出于安全限制会忽略）
真正要“局部刷新数据”？别刷页面，改用 fetch 或 axios
绝大多数场景下，用户要的不是“整个页面闪一下”，而是“订单列表更新”“监控数值变动”。这时候强行刷新页面是反模式。
示例：每 10 秒拉一次最新数据并更新 DOM
<script>
async function updateData() {
try {
const res = await fetch('/api/status');
const data = await res.json();
document.getElementById('status').textContent = data.value;
} catch (e) {
console.warn('fetch failed:', e);
}
}
setInterval(updateData, 10000);
updateData(); // 立即执行一次
</script>
这样做的好处：
- 无白屏、不丢状态、不打断用户操作
- 可精细控制错误重试、节流、加载态提示
- 后端压力更小（只传 JSON，不是整页 HTML）
定时刷新页面本身是个低级手段，现代前端遇到的大部分“刷新需求”，其实都该被替换成数据轮询或 WebSocket 推送。真要用 location.reload()，务必确认用户当前没有未提交的输入或正在进行的关键操作。
