移动端网页切到后台时需彻底休眠视频：监听visibilitychange事件，页面隐藏即pause()、清空src、清除定时器；组件卸载时再次清理并调用load()；iOS需延迟100ms清理并关闭AudioContext。
移动端网页切到后台时，视频若未及时释放，会持续解码、渲染甚至轮询，导致发热、掉电快、内存堆积。低功耗优化的核心不是“停掉视频”，而是“页面不可见时，让视频彻底休眠”。关键在生命周期感知 + 资源即时清理。
监听 visibilitychange 事件，页面隐藏即暂停并清源
用户切出页面（如按 Home 键、切换 Tab、锁屏）时，document.visibilityState 变为 hidden，此时必须主动干预：
- 调用
video.pause()，避免解码线程空转 - 将
video.src设为空字符串（''）或video.removeAttribute('src')，强制浏览器释放解码器和缓冲区 - 如有多个视频，需遍历所有实例统一处理；若使用动态组件（如 Vue/React），确保卸载时也执行相同逻辑
避免后台轮询与定时器干扰
有些播放器或自定义逻辑会用 setInterval 检查播放状态、同步进度或重试加载——这些在后台仍运行，白白耗电：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在
visibilitychange为hidden时，用clearInterval或clearTimeout清除所有相关定时器 - 不要依赖
timeupdate事件做后台逻辑，它在暂停后可能仍偶发触发；改用显式控制流 - 若需记录播放位置，应在暂停瞬间读取
video.currentTime并本地存储，而非持续监听
组件卸载前做资源兜底清理
单页应用中，视频容器可能被 Vue/React 卸载，但 DOM 元素未完全销毁，残留引用会阻止 GC：
立即学习“前端免费学习笔记（深入）”；
- 在组件
beforeUnmount（Vue）或useEffect cleanup（React）中，再次执行pause()+src = ''+load() - 调用
video.load()可重置内部状态，配合清空 src 更可靠 - 避免将 video 元素挂载在全局变量或闭包中长期持有，防止内存泄漏
补充：iOS WebView 的特殊注意事项
iOS 系统级限制更严，后台行为不稳定：
- 即使已暂停，部分旧版 WebView 在后台仍可能维持音频上下文或解码预备状态
- 建议在
visibilitychange后延迟 100ms 再执行清理，避开 Safari 的状态同步延迟 - 如使用 Web Audio API 配合视频，务必同步关闭
AudioContext，否则后台仍耗电
