避免DOM规模过大

大型DOM树可能会以多种方式降低页面性能：

（1）网络效率和加载性能

大型 DOM 树通常包含许多在用户首次加载页面时不可见的节点，这会增加用户的数据成本和减慢加载速度，但其实并非必要。

（2）运行时性能

当用户和脚本与页面交互时，浏览器必须不断重新计算节点的位置和样式。大型 DOM 树与复杂的样式规则相结合，会严重减慢渲染速度。

（3）内存性能

如果 JavaScript 使用通用查询选择器，例如 document.querySelectorAll('li')，您可能会在不知不觉中存储对大量节点的引用，这可能会严重超出用户设备的内存容量。

谷歌Lighthouse DOM 大小审核为何失败？

Lighthouse 会报告页面的总 DOM 元素数量，页面的最大 DOM 深度及其最大子元素。

Lighthouse 使用 DOM 树标记页面：

（1）当 body 元素有超过约 800 个节点时发出警告。

（2）当 body 元素有超过约 1400 个节点时出错。