自定义元素不减少dom节点数，性能提升依赖封装的优化逻辑：用documentfragment批量插入、intersectionobserver控制渲染、template复用结构；需节制attributechangedcallback更新、避免connectedcallback中执行重型逻辑。
自定义元素本身不减少DOM节点数，别指望它自动提速
自定义元素（customElements.define()）只是扩展了HTML标签能力，它不会压缩节点数量、不跳过layout、也不绕过paint。你写一个 <virtual-list></virtual-list>，里面照样塞10万条 <li>，浏览器该卡还是卡——因为真实DOM节点一个没少。真正起作用的是你在这个自定义元素里封装的逻辑：是否用 DocumentFragment 批量插入？是否监听 IntersectionObserver 控制渲染范围？是否复用内部 <slot></slot> 或 <template></template> 节点？这些才是性能分水岭。
用 <template></template> + content.cloneNode(true) 复用结构，避免重复解析
每次动态创建 DOM，浏览器都要走 HTML 字符串 → 词法分析 → 构建节点 → 样式计算全流程。而 <template></template> 是离线容器，它的内容不会被解析、不参与渲染树，适合当“结构模具”。在自定义元素中提前声明模板，运行时只做克隆和数据填充：
class VirtualRow extends HTMLElement {
constructor() {
super();
const template = document.getElementById('row-template');
this.attachShadow({ mode: 'open' }).appendChild(
template.content.cloneNode(true)
);
}
}
注意点：
-
cloneNode(true)比innerHTML快，因为它跳过了字符串序列化和 HTML 解析两步 - 模板里别放内联事件（如
onclick="handle()"），改用this.shadowRoot.addEventListener()绑定，否则克隆后事件丢失 - 如果模板含
<slot></slot>，记得在实例化后手动调用this.appendChild()注入内容，否则 slot 不生效
用 attributeChangedCallback 节制更新，避免 layout 抖动
自定义元素响应属性变更时，默认会同步执行回调。如果多个属性连着变（比如 data-start-index 和 data-count 同时更新），就可能触发多次重排。正确做法是把变更暂存，统一在 requestAnimationFrame 里批量处理：
static get observedAttributes() { return ['data-start-index', 'data-count']; }
attributeChangedCallback(name, _, newValue) {
this._pendingUpdate = true;
if (!this._rafId) {
this._rafId = requestAnimationFrame(() => {
this._renderVisibleItems();
this._rafId = 0;
this._pendingUpdate = false;
});
}
}
常见陷阱：
- 在
attributeChangedCallback里直接读this.offsetHeight或getBoundingClientRect()，会强制同步 layout，引发抖动 - 误把业务状态全塞进 attribute（如
data-user="{...}"），字符串序列化/反序列化开销大；应只传关键索引或 ID，数据查表由组件自己负责 - 没加
if (newValue === oldValue)判断，导致空更新也触发回调
避免在自定义元素中滥用 connectedCallback 初始化重型逻辑
connectedCallback 在元素挂载时触发，但挂载不等于可见。比如列表项被 display: none 包裹，或位于滚动区外，此时执行渲染、fetch 数据、初始化 canvas，纯属浪费资源。更合理的分工是：
-
connectedCallback只做轻量注册：绑定 resize 监听、设置默认样式、预留 shadow root 结构 - 可视性判断交给
IntersectionObserver或首次scroll事件，再触发实际渲染 - 若元素被反复移除/插入（如虚拟列表滚动），
disconnectedCallback中清理定时器、取消 fetch、释放 canvas context，否则内存泄漏
最常被忽略的是：自定义元素的生命周期钩子不保证执行顺序。多个同级自定义元素的 connectedCallback 可能交错执行，别在里面写强依赖顺序的 DOM 操作（比如假设兄弟节点已存在）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
