自定义标签解析开销极低，性能瓶颈在于upgrade时机、嵌套深度超6层导致解析截断、SSR未展开引发双倍内存及hydration失败、事件监听器未清理造成内存泄漏。
自定义标签本身不增加HTML解析开销
浏览器解析 <my-card></my-card> 和 <div> 的成本几乎一样——它只是创建一个基础 <code>Element 实例，不触发构造函数、不执行 JS 逻辑、不生成 Shadow DOM。真正吃资源的是后续的“升级”（upgrade）过程，而不是标签名本身。
常见错误现象：customElements.define('my-card', MyCard) 放在 末尾，但 <my-card></my-card> 出现在 开头 → 浏览器先建 DOM 树，等定义完再批量 upgrade，导致样式重算集中爆发、主线程卡顿。
- 解析阶段只做节点创建，无额外内存或 CPU 消耗
- 未定义的自定义标签会作为“unknown element”挂起，子节点仍照常构建
- 若整个页面有 200 个未定义
<data-chart></data-chart>，DOM 树体积不变，但 upgrade 阶段可能触发 200 次connectedCallback同步执行，极易阻塞渲染
嵌套过深时 DOM 构建可能被截断
流式 HTML 解析器对嵌套深度敏感。实测显示：平均嵌套超过 6 层（如 <layout><section><card><content><item><detail></detail></item></content></card></section></layout>）时，低端安卓机或弱网环境下，解析器可能因内存压力或超时直接终止后续标签处理——你写的 <footer></footer> 可能根本进不了 DOM 树。
自定义标签加剧这个问题，不是因为名字特殊，而是开发者倾向用它们封装逻辑单元，无意中堆叠层级。DevTools 中右键任意节点 → “Show DOM properties” 查 depth 值，超 6 就得拆。
立即学习“前端免费学习笔记（深入）”；
<td> 内嵌套自定义标签风险更高：表格布局计算本就昂贵，再叠加多层 upgrade 逻辑，LCP 易延迟 300ms+ <li>用 <code><section></section>或<article></article>替代纯<div> 堆叠，可压低实际 DOM 节点数（移动端稳定底线是 800 以内） <li>避免 <code><div is="product-card"> 这类回退写法——它不减少解析开销，实例化逻辑照常执行 <h3>SSR 输出未展开的自定义标签等于双倍内存分配</h3> <p>服务端渲染（SSR/SSG）如果直接输出 <code><product-list></product-list>，客户端首次加载时会经历两轮开销：第一轮是 HTML 解析生成裸节点；第二轮是 JS 执行customElements.define()后 upgrade 并重建内容（尤其带 Shadow DOM 或大量innerHTML拼接时）。内存占用接近翻倍。更隐蔽的问题是：若 SSR 框架把
<nav></nav>渲染成空标签（<nav></nav>），hydration 锚点丢失，JS 无法接管，用户看到的是无交互静态页。- 必须确保 SSR 输出的是已展开的真实 DOM，而非占位标签
- 慎用
<template></template>+<slot></slot>包裹关键内容：爬虫和初始 HTML 解析都看不到其中文本 - 若必须用自定义标签，优先走
is=""回退 + ARIA 角色（如<div is="product-card" role="region">），至少保语义可读性 <h3>事件监听器和 dataset 滥用导致隐式内存泄漏</h3> <p><code>dataset本身几乎不占内存，但每个<user-item data-id="123"></user-item>上绑了addEventListener('click', handler)，又没在disconnectedCallback里调removeEventListener，监听器会锁住整个节点及其闭包变量——尤其当handler捕获了大型数据对象时。更危险的是全局缓存：比如把实例赋给
window.cache = document.querySelector('my-table')，整棵子树都无法被 GC 回收。- IntersectionObserver 必须在
disconnectedCallback中显式observer.disconnect() - WeakMap 不是万能解药：若误把 DOM 节点作 key、组件实例作 value，GC 仍无法清理（正确用法是反过来）
- 滚动中频繁创建
<data-chart></data-chart>，每个实例持有一份 canvas 上下文或数据副本，内存峰值陡升
- IntersectionObserver 必须在
