可通过page visibility api监听页面可见性变化，在隐藏时暂停动画、显示时恢复以节省资源；使用document.visibilitystate和visibilitychange事件，结合cancelanimationframe与setinterval控制实现。
可以通过 Page Visibility API 监听页面可见性变化，在页面隐藏时暂停动画，回到前台时恢复，避免后台运行浪费资源。
监听页面可见性状态
浏览器提供 document.visibilityState 属性和 visibilitychange 事件。当用户切换标签页、最小化窗口或锁屏时，该事件会被触发。
-
document.visibilityState返回字符串：'visible'（页面可见）、'hidden'（页面不可见） - 监听事件：
document.addEventListener('visibilitychange', handler) - 注意：该 API 在所有现代浏览器中支持良好，无需 polyfill
暂停和恢复 requestAnimationFrame 动画
使用 requestAnimationFrame 实现的动画需手动控制启停。核心是保存动画帧 ID，并在隐藏时取消，显示时重新调度。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 定义一个变量（如
animationId）存储当前帧 ID - 在
visibilitychange回调中判断：if (document.hidden) { cancelAnimationFrame(animationId); } - 若页面变为可见且动画应继续，调用一次
animate()启动循环 - 确保
animate函数内部最后仍调用requestAnimationFrame(animate)
处理定时器类动画（如 setInterval）
若动画基于 setInterval 或 setTimeout，需配合 clearInterval 和重启逻辑。
- 保存定时器 ID：
let timer = setInterval(...) - 页面隐藏时：
clearInterval(timer); timer = null; - 页面显示时检查
timer === null，再重新setInterval - 注意避免重复启动，可加标志位或直接复用 clearInterval + 重设逻辑
兼容性与注意事项
部分旧版浏览器（如 IE10）需使用带前缀的事件名 webkitvisibilitychange，但现代项目通常无需兼容。
- 推荐写法：
const visibilityChange = 'visibilitychange'; document.addEventListener(visibilityChange, ...) -
document.hidden是更简洁的布尔判断方式，等价于document.visibilityState === 'hidden' - 动画暂停后，不要假设时间连续——恢复时建议重置动画状态或跳过已延迟的帧
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
