页面隐藏时定时器被节流而非休眠:settimeout/setinterval最小间隔约1秒且不补发,requestanimationframe完全停止;应监听visibilitychange主动启停逻辑。

当页面被隐藏(比如切换到其他标签页、最小化浏览器窗口),JavaScript 的事件循环和定时器确实会受到浏览器的节流或暂停影响,但具体行为取决于定时器类型、浏览器实现以及页面可见性状态。这不是“完全休眠”,而是一种有策略的资源优化机制。
visibilitychange 事件本身不暂停 JS 执行
页面触发 visibilitychange 时,只是通知你当前 document.visibilityState 变了(如从 visible 变为 hidden),它本身不会主动暂停任何代码运行。你的同步逻辑、正在执行的函数、已入队但未执行的微任务(如 Promise.then)仍会照常完成。
setTimeout / setInterval 在 hidden 状态下会被大幅节流
主流浏览器(Chrome、Edge、Firefox)对处于 background 标签页中的 setTimeout 和 setInterval 实施强制节流:
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 最小间隔被限制在约 1000ms(1秒)左右,即使你设了
setTimeout(fn, 10),实际执行可能延迟到 1s 以上; - 多个定时器会合并调度,避免频繁唤醒;
- 如果页面长时间 hidden(如数分钟),部分浏览器可能进一步降低频率,甚至临时挂起低优先级定时器;
- 一旦页面重新 visible,被节流的定时器通常不会补发**(不累积)——错过的时间直接跳过,只按原定节奏继续后续调用。
requestAnimationFrame 在 hidden 时基本停止
requestAnimationFrame (rAF) 完全依赖屏幕刷新节奏。页面 hidden 后:
- 绝大多数浏览器会暂停 rAF 回调的触发,直到页面重新 visible;
- 没有“补帧”机制,隐藏期间所有 rAF 请求都被丢弃;
- 这是合理的:hidden 页面不需要动画渲染,暂停可显著降低 CPU/GPU 负载。
如何合理应对?用 visibilityState 主动控制逻辑
不要依赖定时器在 hidden 时精准工作。正确做法是监听 visibilitychange,主动启停或调整行为:
- 页面 hidden 时:clearTimeout / clearInterval 已有的轮询定时器;暂停动画(取消 rAF);保存关键状态;
- 页面 visible 时:重新设置定时器;恢复 rAF 循环;检查是否需要补偿(例如同步一次数据,而非靠定时器自动触发);
- 用
document.hidden或document.visibilityState === 'visible'判断当前状态,避免在 hidden 时做无意义计算或请求。
不复杂但容易忽略:定时器的“暂停”是浏览器单方面节流,不是 JS 引擎休眠。真正可控的,是你自己对 visibility 状态的响应逻辑。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










