必须主动执行四步休眠流程：pause()、清空src、load()、手动移除事件监听器；MediaStream需stop轨道并revokeObjectURL；复用video元素而非频繁创建；严格绑定框架生命周期；用DevTools验证释放。
要真正解决 HTML5 多媒体应用中的内存泄漏和视频元素未销毁问题，关键不是“等它自己释放”，而是主动、完整、同步地切断所有资源引用链。浏览器不会自动回收仍在运行的解码器、未清空的缓冲区或绑定着闭包的事件监听器——哪怕 video 元素已从 DOM 中移除。
一、video 元素必须执行四步休眠流程
仅靠 v-if、display: none 或 remove() 无法释放底层媒体资源。每次切换或卸载前，必须对 video 实例执行以下不可跳过的操作：
-
调用
video.pause()：停止播放，中断解码线程 -
设
video.src = ""：清空源地址，防止预加载继续占用网络与缓冲 -
调用
video.load()：重置内部加载状态（触发emptied事件），清空已缓存帧和 pipeline -
手动移除所有事件监听器：包括
timeupdate、ended、error、canplay等，使用同一函数引用解绑（避免箭头函数）
二、srcObject 类型需额外处理 MediaStream
若 video 使用了摄像头/麦克风流（srcObject = stream），仅设 null 不够，必须显式停止轨道：
- 先调用
stream.getTracks().forEach(track => track.stop()) - 再设
video.srcObject = null - 若使用了
URL.createObjectURL(stream)，务必配对调用URL.revokeObjectURL(video.src)
三、禁止频繁创建销毁 video 标签
反复 document.createElement('video') 或通过 innerHTML 插入新 video 是内存暴增主因。每个实例都会分配独立解码上下文和 GPU 纹理，销毁不彻底极易堆积：
- 固定复用一个
元素，仅动态更新其src或srcObject - 避免用
removeChild()或remove()彻底删掉 video —— DOM 移除后，JS 若仍持有引用或事件未解绑，该实例无法被 GC - 如需多路播放（如画中画、分屏），优先采用
MediaSource API + URL.createObjectURL()动态喂流，而非挂多个 video 标签
四、与框架生命周期严格绑定
React/Vue 等框架中，视频控制不能依赖 props 变化或 v-show 切换，必须卡在真实挂载与卸载时机：
-
React：用
useLayoutEffect初始化（确保 DOM 已插入），cleanup 函数中执行完整四步休眠 + 解绑 -
Vue：在
onMounted中赋值 src 并监听事件；onBeforeUnmount中执行全部清理逻辑 - 禁用模板直写
—— 这会触发浏览器自动加载，失去控制权；应先设空src，mounted 后再赋值
五、验证是否真正释放
代码写完不等于问题消失，必须用工具确认：
- Chrome DevTools → Memory → “Take Heap Snapshot”，筛选
HTMLVideoElement，对比切换前后数量是否稳定 - Performance 面板录制完整操作流程，观察内存曲线是否回落（而非阶梯式上升）
- 访问
chrome://media-internals，确认旧视频的pipeline_state已变为ENDED或STOPPED，而非PLAYING或WAITING_FOR_DECODER
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
