大型 DOM 树可能会通过多种方式降低页面性能：
网络效率和负载性能
大型 DOM 树通常包含许多在用户首次加载网页时不可见的节点，这会不必要地增加用户的数据流量费用并延长加载时间。
运行时性能
当用户和脚本与您的页面互动时，浏览器必须不断重新计算节点的位置和样式。大型 DOM 树与复杂的样式规则相结合可能会严重降低渲染速度和互动性。
内存性能
如果您的 JavaScript 使用
document.querySelectorAll('li')等通用查询选择器，您可能会不知不觉地存储对大量节点的引用，这可能会超出用户设备的内存容量。
Lighthouse DOM 大小审核失败的原因
Lighthouse 会报告网页的总 DOM 元素数、网页的最大 DOM 深度以及其最大子元素数：
Lighthouse 会标记 DOM 树存在以下问题的网页：
- 如果正文元素包含超过 800 个节点，则会发出警告。
- 当正文元素包含的节点超过大约 1,400 个时，会出现错误。
如何优化 DOM 大小
一般来说，应设法仅在需要时创建 DOM 节点，并在不再需要节点时将其销毁。
如果您要发布大型 DOM 树，请尝试加载您的页面，并手动记录显示哪些节点。或许您可以从最初加载的文档中移除未显示的节点，并仅在相关用户互动（例如滚动或点击按钮）后创建这些节点。
如果您在运行时创建 DOM 节点，子树修改 DOM 更改断点可帮助您确定节点的创建时间。
如果无法避免 DOM 树较大，另一种提高渲染性能的方法是简化 CSS 选择器。如需了解详情，请参阅 Google 的缩小样式计算的范围并降低其复杂性。
如需了解详情，请参阅DOM 大小过大对交互性有何影响以及您可以采取哪些措施一文。
特定于堆栈的指导
Angular
如果要呈现大型列表，请使用 Component Dev Kit (CDK) 进行虚拟滚动。
回应
- 如果您要在页面上呈现很多重复元素，请使用“窗口类”库（如
react-window）尽量减少所创建的 DOM 节点的数量。 - 使用
shouldComponentUpdate、PureComponent或React.memo尽量减少不必要的重复呈现。 - 如果您使用
Effect钩子提高运行时性能，则仅在某些依赖项发生更改之前跳过效果。