Connor Clark
发布时间：2025 年 10 月 8 日
大型 DOM 可能会增加样式计算和布局的用时，从而影响网页响应速度。大型 DOM 也会增加内存用量。
深层 DOM 树本身并不是性能问题，但它是使用不必要的元素嵌套的设计模式的症状。
此数据洞见会考虑整个 DOM，包括影子根中的内容。它会忽略不是元素的 DOM 节点。它还会忽略 <iframe> 内容。
正确的预期：
- 元素总数：网页 DOM 中的元素总数。
- DOM 深度：DOM 树的最大深度。
- 子元素最多的元素：具有最多子元素的元素。
如何传递此分析洞见
只有在布局或样式重新计算时间超过 40 毫秒时，此数据洞见才会失败。
- 大型布局更新涉及 100 多个布局对象（大致相当于元素）。
- 大型样式重新计算会影响 300 多个元素。
如果失败，此意见会在性能面板中的火焰图上突出显示这些事件。
如需降低这些活动的费用，请执行以下操作：
- 了解如何衡量 CSS 选择器的开销并降低样式复杂性。
- 通过减少不必要的嵌套来最大限度地缩短 DOM 深度。
- 考虑采用 Web Components 来使用 Shadow DOM - 虽然这不会减小 DOM 大小，但确实会降低样式重新计算的成本。
针对特定堆栈的指南
此数据分析还针对使用以下技术的网页提供特定于堆栈的指导：
Angular
如果您要呈现大型列表，请使用 Component Dev Kit (CDK) 进行虚拟滚动。
回应
- 如果您要在页面上呈现很多重复元素，不妨使用“窗口类”库（如
react-window）尽量减少所创建的 DOM 节点的数量。 - 使用
shouldComponentUpdate、PureComponent或React.memo尽量减少不必要的重新渲染。 - 如果您使用
Effect钩子来提高运行时性能，则应该仅在某些依赖项发生更改之前跳过效果。