customElements.define后页面无反应并非注册失败，而是动态插入的节点未升级；需调用customElements.upgrade(node)或确保注册早于HTML解析完成。
customElements.define 调用后页面没反应，是不是注册失败？
不是注册失败，而是节点没被升级——浏览器只在 HTML 解析阶段自动升级已知标签，customElements.define 之后插入的节点（比如 innerHTML、insertAdjacentHTML）仍是 HTMLUnknownElement，connectedCallback 完全不触发。
- 检查是否在
<script>中提前执行注册：必须早于 HTML 解析完成，不能等window.onload或模块异步加载后再调用 - 动态插入含自定义标签的 HTML 后，立刻执行
customElements.upgrade(node)，仅作用于该节点及其子树 - 避免对整个容器反复调用
upgrade，大量节点时用queueMicrotask分片处理，防止主线程卡顿
为什么 connectedCallback 里读 offsetHeight 会拖慢渲染？
因为 offsetHeight 强制触发同步 layout 计算，而自定义组件内部若带 shadowRoot，每次 layout 都要重新计算独立样式作用域和布局上下文——100 个组件 ≈ 100 套 CSSOM 并行跑。
- 改用
getComputedStyle(element).height获取计算后样式，不触发布局 - 需要尺寸信息时，监听
resize事件或用ResizeObserver替代轮询 - 静态结构优先用
shadowRoot.innerHTML = `...`一次性注入，别在render()里反复appendChild
PerformanceObserver 能监控 Shadow DOM 内部 layout 吗？
能，但需手动过滤。原生 layout-shift 类型不区分来源，entry.sourceElement 可能指向 shadowRoot 内部元素，但必须确认它属于你的组件实例。
- 在组件
connectedCallback中启动requestIdleCallback打点，记录performance.now()，对比首次 paint 时间 - 用
PerformanceObserver监听layout-shift，通过entry.sourceElement?.getRootNode() instanceof ShadowRoot判断是否来自 shadow 内部 - 高频更新组件（如进度条）可加
contain: layout paint style，写在shadowRoot.firstElementChild.style.contain
dataset 读写在滚动回调里变慢，怎么定位？
element.dataset.xxx 和 element.getAttribute('data-xxx') 都是 DOM 查找操作，不是内存访问。每帧执行几十次就会明显拖慢 JS 主线程。
立即学习“前端免费学习笔记（深入）”；
- 在关键路径（如
scroll、animationframe）中缓存读取结果到变量或实例属性，避免重复调用 - 用
console.time('dataset-read')或performance.mark()测量单次耗时，重点看循环内调用频次 - 避免
querySelectorAll('[data-action]')这类宽泛选择器，尤其别用[data-*]，匹配开销随 DOM 规模指数增长
