真正卡顿来自挂载阶段的重复初始化和dom遍历，而非customelements.define注册本身；需早于html解析完成注册、手动upgrade动态插入节点、connectedcallback中防重复初始化、用mutationobserver替代全量dom查询。
自定义组件初始化慢，八成不是注册太晚，而是挂载时反复执行、DOM遍历失控、shadowRoot无节制创建——customElements.define本身不卡，connectedCallback里写错一行就拖垮100个实例。
customElements.define 为什么不能等到 window.onload 才调用
浏览器解析 HTML 时，遇到 <my-card></my-card> 这类标签，会立刻生成 HTMLUnknownElement 实例；等你再调用 customElements.define('my-card', Card)，这些节点已“定型”，不会自动升级，connectedCallback 永远不触发。
- 错误做法：
window.addEventListener('load', () => customElements.define('my-card', Card))或模块动态import()后注册 - 正确做法：在
<script></script>标签内联执行，或用type="module" defer确保在 HTML 解析前完成 - 若无法控制 HTML 输出（如 CMS 渲染），必须手动升级：
customElements.upgrade(document.body)或只升级目标容器：customElements.upgrade(el) - 注意：
upgrade()是同步操作，大量节点时建议分片，比如用queueMicrotask(() => customElements.upgrade(node))
connectedCallback 里哪些操作会引发 layout thrashing
connectedCallback 不是构造函数，它会在元素每次插入 DOM 时触发——Vue 列表重渲染、display: none 切回、甚至多次 appendChild 都会反复调用。里面任何强制同步布局的操作，都会让浏览器反复计算样式和布局。
- 绝对避免：
this.querySelectorAll('.item')、this.offsetHeight、this.getClientRects()—— 这些会触发重排 - 静态结构优先用
this.innerHTML = `...`一次性注入，别在 render 中循环appendChild - 属性响应逻辑尽量收口到
attributeChangedCallback，用this.setAttribute()控制更新节奏，而非监听所有变化 - Shadow DOM 初始化只做一次：
if (!this.shadowRoot) this.attachShadow({ mode: 'closed' })
大规模挂载时 shadowRoot 创建开销怎么压
每个带 shadowRoot 的组件实例，都会创建独立的 CSSOM、样式作用域和布局上下文。100 个组件 ≈ 100 套样式引擎并行跑，不是 DOM 节点多，而是样式计算爆炸。
- 非必要不用
mode: 'open'——'closed'虽不可外部访问，但能省掉部分内部追踪开销 - 避免在
connectedCallback中动态创建<style></style>标签；预置样式字符串，用adoptedStyleSheets复用 - 如果组件结构固定，考虑用
innerHTML+template.content.cloneNode(true)替代每次新建 shadowRoot - 慎用
:host-context()和深度选择器，它们会让样式匹配变慢，尤其在嵌套 shadowRoot 场景下
动态插入含自定义标签的 HTML 字符串后为什么没反应
用 innerHTML、insertAdjacentHTML 或框架的 v-html/dangerouslySetInnerHTML 插入含 <my-list></my-list> 的字符串时，浏览器不会识别新节点为自定义元素——它们仍是 HTMLUnknownElement，生命周期完全静默。
- 插入后必须立即调用
customElements.upgrade(el)，仅作用于该节点及其子树 - 不要对整个
document.body反复调用upgrade()，避免重复工作；可配合MutationObserver监听新增节点，只升级新增部分 - 如果插入频率高（如滚动加载列表），建议批量收集节点，用
requestIdleCallback分片升级 - 框架中使用时，确保 upgrade 在 DOM 更新后、下次事件循环前执行，否则可能错过时机
真正难调的不是“怎么注册”，而是“什么时候不该初始化”——connectedCallback 里多一行查询、少一个防重判断，都可能让性能从线性退化为平方级。组件越通用，越要假设它会被反复挂载、隐藏、重用，而不是当成一次性页面片段来写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
