requestAnimationFrame天然支持后台暂停：页面不可见时自动停止执行，节省CPU资源，无需手动修复；其调度由浏览器渲染引擎控制，现代浏览器均标准实现该行为。
requestAnimationFrame 本身就能解决后台标签页停滞问题——它不是“需要修复”的缺陷，而是浏览器内置的智能行为：页面不可见时自动暂停执行，不消耗 CPU，也不触发无意义的动画更新。
为什么它天然适配后台场景
不同于 setTimeout 或 setInterval，requestAnimationFrame 由浏览器渲染引擎直接调度。当用户切换标签页、最小化窗口或锁屏时，浏览器会主动中止回调调用，直到页面重新获得焦点。这不是兼容性补丁，是所有现代浏览器（包括 Chrome、Firefox、Safari 和 Edge）的标准策略。
IE 的特殊处理（仅限 IE10/11）
IE 对“页面可见性”的判断更保守，有时即使标签页激活，动画也可能降频或卡住。此时需手动唤醒：
- 监听 visibilitychange 事件，但注意 IE 使用 msvisibilitychange
- 检测 document.msHidden（IE）或 document.hidden（其他浏览器）
- 在页面重新可见时，主动调用一次 requestAnimationFrame 触发重绘信号
如何确保动画恢复后状态正确
暂停不是重置。时间戳会继续累积，但你的逻辑不能依赖“帧数”或“固定增量”。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 在每次回调中使用传入的 timestamp 计算真实经过时间（deltaTime）
- 用 position += speed × deltaTime 更新状态，而非 position += 2 这类固定步进
- 避免在暂停期间修改 DOM 或 Canvas 状态，防止恢复时出现跳变
别误操作：取消 ≠ 停止，停止 ≠ 清除
后台暂停是浏览器自动行为，无需你调用 cancelAnimationFrame；但组件卸载、元素移除或用户明确点击“停止”时，必须主动调用 cancelAnimationFrame 并清空 ID 变量，否则动画可能在页面隐藏后仍残留引用，造成内存泄漏。
