DOM（文档对象模型） 是 HTML 标签树状结构的统称。它对页面速度的影响是，页面渲染时 HTML 结构越复杂，页面速度就越慢。

根据 Lighthouse 的说法， DOM 结构使用三个指标来衡量. 为这些指标提供参考点：

  • 标签总数应为 小于1500
  • 最大标记深度应为 小于32
  • 子标签的最大数量应为 小于60

在上面的例子中，标签总数较差，最大标签深度很好，但子标签的最大数量较差。

优化 DOM 元素完全是前端利益相关者的责任。在首次创建页面代码时随机或任意选择的每个标签在项目完成后都会产生成本。因此，我们邀请所有前端开发人员默哀一分钟，睁开双眼。

膨胀的 DOM 对页面性能产生负面影响的情况包括：

  • 具有大量节点（标签）的页面将经历 由于规模较大，导致网络拥塞和加载困难，从而增加 TTFB (第一个字节时间)。
  • 渲染加载的节点以创建 他们的立场和风格需要时间，从而提高FCP（首次内容绘制）。
  • 随着节点数量的增加，必要的负载 JavaScript 操作会给内存带来负担，增加TFT（交互时间）。

为了用一个非常简单的例子来说明 DOM 优化，请考虑以下情况，其中 DOM 的数量和深度都减少了：

<div id="nav-element">
 <ul>
 </ul>
</div>

不要这样做：

<ul id="nav-element">
</ul>

有必要这样做：减少 DOM 大小最推荐的两种方法是延迟加载和分页。由于列表页上的卡片结构包含大量 DOM，因此建议使用无限滚动或分页。在决定分页中的项目数时，一定要考虑 DOM 测量标准。通常考虑的时间 分页产品数量为15-20秒，但实际上这部分应该由前端利益相关者来计算，并考虑 DOM 大小。

一个非常简单的解决方案是不添加元素 在 HTML 页面上不可见的内容，无需使用 CSS 隐藏它们。如果需要显示某个元素，则应稍后调用并显示给用户。您应该知道，使用 CSS 隐藏元素会扩大 DOM。

来源：