HTML本身无组件级清理钩子，资源清理依赖Web Components的disconnectedCallback或框架的卸载钩子；必须手动清除定时器、事件监听、Canvas动画帧等，否则必然导致内存泄漏和交互错乱。
HTML 本身没有组件级资源清理钩子
HTML 是标记语言，不提供生命周期钩子或资源清理机制。所谓“组件级清理”，实际依赖宿主环境：要么是 Web Components（connectedCallback/disconnectedCallback），要么是框架（React 的 useEffect 清理函数、Vue 的 onUnmounted）。纯 HTML 标签（如 <div>、<custom-element>）不会自动触发任何清理逻辑。
Web Components 中用 disconnectedCallback 清理资源
这是最接近“HTML 原生组件”清理的方式。当自定义元素从 DOM 中移除时，disconnectedCallback 会被调用，适合清理定时器、事件监听、Canvas 动画帧、WebSocket 连接等。
常见错误现象：disconnectedCallback 可能被多次调用（比如元素在 DOM 中移动而非删除），或在 Shadow DOM 内部节点变化时不会触发——它只响应该元素自身是否还在文档中。
- 必须确保清理逻辑幂等：重复执行不报错、不重复取消已销毁的定时器（可用
clearTimeout(this._timer)即使this._timer为null或undefined） - 避免在
disconnectedCallback中访问document或window全局对象（某些环境下可能已被释放） - 不要在此处异步操作（如
fetch或await），因为浏览器不等待它完成就继续卸载
class MyWidget extends HTMLElement {
connectedCallback() {
this._timer = setInterval(() => console.log('tick'), 1000);
this._handleClick = () => alert('clicked');
this.addEventListener('click', this._handleClick);
}
disconnectedCallback() {
clearInterval(this._timer);
this.removeEventListener('click', this._handleClick);
}
}
customElements.define('my-widget', MyWidget);
用 MutationObserver 监听父容器移除（兜底方案）
当无法控制元素是否为自定义组件（比如第三方库插入的 <div id="chart-container">），且你又需要在其被删前做清理，可对父节点监听 childList 变化，并检查目标元素是否消失。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
性能影响明显：全局监听开销大，尤其在频繁 DOM 更新场景；兼容性没问题，但容易漏掉直接调用 element.remove() 而未经过父节点的情况。
- 优先监听最近的稳定父容器，而非
document.body - 观察器回调中需用
node.contains(targetElement)确认是否真被移除，避免误判 - 务必在清理后调用
observer.disconnect()，否则内存泄漏
框架里别试图绕过其清理机制去“手动清理 HTML”
React、Vue、Svelte 等框架会管理组件实例与 DOM 生命周期。试图在框架组件内用原生方式（如直接 document.getElementById().remove()）移除元素，会破坏框架状态同步，导致内存泄漏或渲染异常。
典型错误：在 React 函数组件里用 useEffect 拿到 ref 后，手动添加事件监听却忘记返回清理函数；或清理函数里用了闭包捕获了过期 state，导致清理逻辑失效。
- React 中清理函数必须返回，且不能是异步函数（
async useEffect返回的 Promise 不会被当作清理逻辑） - Vue 的
onBeforeUnmount在组件 v-if 为false或路由离开时才触发，v-show不会调用 - 所有清理操作应与挂载操作严格配对：加几个监听器，就清几个；开几个定时器，就关几个
真正难的不是写清理代码，而是判断“这个资源到底归谁管”——DOM 节点由框架管，Canvas 上下文由业务逻辑管，WebSocket 连接可能跨多个组件共享。边界模糊时，清理责任就容易落空。
