html5视频内存泄漏源于资源未主动释放，需调用pause()、置空src、load()重置、移除事件监听器，并复用video元素而非频繁创建销毁，严格同步框架生命周期进行清理。
HTML5 视频内存泄漏不是浏览器 bug，而是资源未被主动释放导致的常见问题。核心在于：视频元素一旦创建，就会持续占用解码器、GPU纹理、缓冲区等资源，即使 DOM 被移除或 display: none，只要没显式暂停+清空+销毁，内存就不会真正回收。
确保 video 元素在切换前彻底“休眠”
不要只靠 v-if 或 display: none 隐藏视频——这只会让播放暂停，但解码器仍在后台运行，缓冲数据不释放。正确做法是主动干预：
- 调用
video.pause()停止播放 - 设
video.src = ""清空源地址（避免浏览器继续预加载） - 调用
video.load()重置内部状态（触发emptied事件，清空缓冲） - 移除所有事件监听器（
timeupdate、ended、error等），防止闭包引用残留
复用 video 标签，而非频繁创建销毁
反复 document.createElement('video') 或 innerHTML = '<video>'</video> 是内存暴增主因。浏览器对每个 video 实例分配独立解码上下文，销毁不彻底时极易堆积：
- 固定使用一个 video 元素，仅动态更新其
src（配合上述 pause/load 流程） - 避免用
removeChild()或remove()彻底删掉 video 标签——DOM 移除后，若 JS 仍持有引用或事件未解绑，该实例仍无法 GC - 如需多路播放（如画中画、分屏），优先用 MediaSource API +
URL.createObjectURL()动态喂流，而非并行挂多个 video 标签
与框架生命周期严格同步
React/Vue 中，视频控制必须绑定到组件真实挂载与卸载时机，不能依赖 props 变化自动响应：
- React：用
useLayoutEffect初始化（确保 DOM 已插入），cleanup 函数中执行pause()+src = ""+load()+removeEventListener - Vue：在
onMounted中赋值src并监听事件；onBeforeUnmount中完整清理；避免用v-show切换，改用v-if让 DOM 真实销毁（但需配对清理逻辑） - 禁止模板直写
<video :src="url"></video>——这会触发浏览器自动加载，失去控制权；应先设空 src，mounted 后再赋值
验证是否真正释放
光靠代码逻辑不够，必须用工具确认：
- Chrome DevTools → Memory → “Take Heap Snapshot”，筛选
HTMLVideoElement，对比切换前后数量 - Performance 面板录制操作流程，观察内存曲线是否回落（而非持续阶梯上升）
- 检查
chrome://media-internals页面，确认旧视频的pipeline_state是否变为ENDED或STOPPED，而非PLAYING或WAITING_FOR_DECODER
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
