自定义标签本身不增加内存，但实例化过程会触发额外开销：构造函数、connectedcallback逻辑、shadow dom及子节点生成才是内存消耗主因，深层嵌套与未清理资源（如定时器、事件监听器）会显著放大内存占用。
自定义标签本身不增加内存，但实例化过程会触发额外开销
浏览器对 <my-button></my-button> 这类自定义标签的解析成本极低——它和 <div> 一样只是创建一个基础 Element 实例。真正吃内存的是 <code>customElements.define() 后首次创建该标签时执行的构造函数、connectedCallback 里的逻辑，以及可能同步生成的 Shadow DOM 或子节点。
常见踩坑点：
- 在
connectedCallback中直接JSON.parse(largeData)或递归生成 100+ 节点，主线程卡顿且内存峰值陡升 - 未做防抖/节流，滚动中频繁创建
<data-chart></data-chart>，每个实例都持有一份 canvas 上下文或数据副本 - Shadow DOM 内部用了
innerHTML拼接大量 HTML 字符串，触发重复 DOM 解析和样式计算
嵌套过深的自定义标签放大 DOM 节点内存占用
每个自定义标签仍是标准 DOM 节点，和 <div> 占用相近内存（约 1–2 KB/节点），但深层嵌套会加剧间接开销：样式继承链变长、事件冒泡路径拉长、布局树计算复杂度上升。实测显示，6 层嵌套的 <code><layout><section><card><content><item><detail></detail></item></content></card></section></layout> 结构，比扁平化 <article class="card"></article> 多占 15–20% JS 堆内存。
关键约束：
- 避免在 SSR/SSG 输出中保留未展开的自定义标签（如
<product-list></product-list>），否则客户端需二次解析+实例化，内存分配翻倍 - 不用
<template></template>+<slot></slot>包裹大量内容，因为 slot 分发不减少节点数，所有子节点仍参与 layout/paint - 慎用
is=""回退语法（如<div is="product-card">），它虽兼容 SEO，但实例化逻辑仍照常执行 <h3>自定义标签绑定大量 dataset 或事件监听器易致隐式泄漏</h3> <p><code>dataset本身几乎不占内存，但若你在每个<user-item></user-item>上绑了addEventListener('click', handler)，又没在组件卸载时调用removeEventListener，这些监听器会把整个节点及其闭包变量锁在内存里——尤其当handler捕获了大型数据对象时。更隐蔽的问题：
- 全局缓存：把自定义元素实例赋给
window.cache = document.querySelector('my-table')，阻止 GC 回收整棵子树 - 未清理的 IntersectionObserver：在
disconnectedCallback里忘了调用observer.disconnect() - 滥用
WeakMap错误：用自定义元素作 key 却没在销毁时weakMap.delete(el)，key 弱引用失效，value 反而滞留
Chrome DevTools 里怎么确认是不是自定义标签惹的祸
别只看任务管理器数字。打开 Chrome DevTools → Memory → Take Heap Snapshot，然后按
Constructor排序，重点关注：-
HTMLUnknownElement实例数异常高（说明自定义标签未被正确注册，降级为未知元素但仍在内存里） -
MyButton、DataChart等你定义的类名出现大量实例，且 “Retained Size” 明显偏大 - 筛选
Detached DOM tree，看里面是否堆着大量已移除但未销毁的<my-list-item></my-list-item>
真正麻烦的不是标签名本身，而是你写在
class MyList extends HTMLElement里的那几行没清理的setInterval、没解绑的resize监听，或者构造函数里悄悄 new 出来的 10MB 数组——这些动作在代码里轻描淡写，在内存里却结结实实挂着。 - 全局缓存：把自定义元素实例赋给
