移动端网页切到后台时需彻底休眠视频：监听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，否则后台仍耗电

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！