customelements.define后页面无反应并非注册失败，而是动态插入的节点未升级；需调用customelements.upgrade(node)或确保注册早于html解析完成。

customElements.define 调用后页面没反应，是不是注册失败？

不是注册失败，而是节点没被升级——浏览器只在 HTML 解析阶段自动升级已知标签，customElements.define 之后插入的节点（比如 innerHTML、insertAdjacentHTML）仍是 HTMLUnknownElement，connectedCallback 完全不触发。

• 检查是否在 <script></script> 中提前执行注册：必须早于 HTML 解析完成，不能等 window.onload 或模块异步加载后再调用
• 动态插入含自定义标签的 HTML 后，立刻执行 customElements.upgrade(node)，仅作用于该节点及其子树
• 避免对整个容器反复调用 upgrade，大量节点时用 queueMicrotask 分片处理，防止主线程卡顿

为什么 connectedCallback 里读 offsetHeight 会拖慢渲染？

因为 offsetHeight 强制触发同步 layout 计算，而自定义组件内部若带 shadowRoot，每次 layout 都要重新计算独立样式作用域和布局上下文——100 个组件 ≈ 100 套 CSSOM 并行跑。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 改用 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 规模指数增长

Shadow DOM 的样式隔离和 layout 独立性是双刃剑：它让组件可封装，也让性能问题更隐蔽——你看到的“没新增节点”，可能正悄悄运行着几十套独立布局引擎。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！