大型 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
钩子提高运行时性能,请仅跳过影响,直到某些依赖项发生更改。