大型 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 的缩小样式计算的范围和复杂性。
针对特定堆栈的指南
Angular
如果您要呈现大型列表，请将虚拟滚动与组件开发套件 (CDK) 搭配使用。
回应
- 如果您要在网页上渲染许多重复元素，请使用
react-window等“窗口化”库，以尽可能减少所创建的 DOM 节点的数量。 - 使用
shouldComponentUpdate、PureComponent或React.memo尽可能减少不必要的重新渲染。 - 如果使用
Effect钩子提高运行时性能，请仅跳过影响，直到某些依赖项发生更改。