HTML5组件残留本质是开发者未正确释放资源。需手动清理WebGL上下文、MediaStream/Recorder、事件监听器、Observer及Blob URL；video/audio须pause、清src/srcObject、调load()；框架中须在卸载钩子中清理。
HTML5组件残留通常不是浏览器行为，而是开发者未正确销毁或卸载
现代浏览器本身不会“残留”HTML5组件——比如、、WebGL上下文或MediaRecorder实例。所谓“残留”，绝大多数情况是 JS 逻辑未释放资源、事件监听器未移除、或 DOM 节点被移除但关联对象仍持有引用，导致内存无法回收。
典型表现包括：console中持续打印timeupdate事件、requestAnimationFrame仍在运行、WebGLRenderingContext报INVALID_OPERATION错误、或 DevTools 的 Memory 面板显示 detached DOM 节点长期不释放。
- 用
document.getElementById('myCanvas').getContext('2d')获取的CanvasRenderingContext2D无需手动销毁，但若创建了ImageBitmap、OffscreenCanvas或WebGL上下文，则必须显式调用gl.deleteTexture()、gl.deleteBuffer()等 -
MediaStream和MediaRecorder必须调用stop()，否则摄像头/麦克风可能持续占用，且ondataavailable回调仍会触发 - 使用
addEventListener注册的监听器，若节点被remove()但未removeEventListener，会形成闭包引用，阻止 GC
Video/Audio 元素的“假残留”：src 和 playbackState 没清干净
和元素即使从 DOM 移除，只要其src未设为空、或play()后未pause()，底层解码器和媒体缓冲区可能仍在运行。Chrome 中甚至会出现video.srcObject = null后仍继续拉流的情况。
const video = document.getElementById('myVideo');
// ✅ 正确清理顺序
video.pause();
video.currentTime = 0;
if (video.srcObject) {
video.srcObject.getTracks().forEach(track => track.stop());
video.srcObject = null;
}
video.src = ''; // 清空 src 属性（含 blob: URL）
video.load(); // 触发重置加载状态
-
video.load()是关键一步，它重置内部加载状态，否则networkState可能卡在NETWORK_LOADING - 若
src是Blob URL（如URL.createObjectURL(blob)），必须配对调用URL.revokeObjectURL(video.src) - 不要依赖
removeChild()或element.remove()自动释放媒体资源——它们只处理 DOM 树，不触碰媒体栈
Custom Elements 或框架组件中 HTML5 特性未解绑
使用customElements.define()定义的组件，或 React/Vue 中封装的、connectedCallback或mounted中初始化渲染循环、绑定resize监听、启动IntersectionObserver。若未在disconnectedCallback或beforeUnmount中清理，就会“残留”。
立即学习“前端免费学习笔记（深入）”；
- React 中需在
useEffect返回函数里清理：cancelAnimationFrame、observer.disconnect()、canvas.getContext('2d').clearRect()（虽非必须，但可避免脏绘） - Vue 3 的
onBeforeUnmount钩子内应停止MediaRecorder、关闭WebSocket、清除setTimeoutID - 自定义元素中，
disconnectedCallback里不能访问this.shadowRoot（可能已为null），应提前在connectedCallback保存对canvas或gl的引用并在此处置空
DevTools 里看到的“残留”可能是缓存或调试痕迹，不是真实泄漏
打开 Chrome DevTools → Memory → Take heap snapshot 后，搜索HTMLVideoElement或WebGLRenderingContext，有时会发现大量“活着”的实例。但这不等于泄漏——它们可能只是被全局变量、闭包或console.log()临时引用着。
- 执行
console.clear()后再拍快照，常能消除大量“虚假”引用 - 检查
Retainers列：若显示Window→console→value，说明只是控制台保留了对象引用，刷新页面即消失 - 真正泄漏的标志是：多次操作（打开/关闭视频页）后，快照中同类型对象数量持续增长，且
Retainers指向你的模块代码或事件监听器
最易被忽略的是ResizeObserver和IntersectionObserver——它们没有.destroy()方法，必须显式调用.disconnect()，否则观察目标即使被移除，观察器内部仍持有对其的弱引用，且回调队列可能持续触发。
