DOM深度对网站性能的影响

创作时间:

作者:

@小白创作中心

DOM深度对网站性能的影响

引用

CSDN

https://blog.csdn.net/lgno2/article/details/140029983

你用 Lighthouse 测量过网站性能吗？你可能见过“避免过多的 DOM 节点”的警告，就像下面这样：

Lighthouse 提醒我们，DOM 节点太多会增加内存使用量，还会导致样式计算很耗时。再加上网站上其他各种操作，这会显著影响用户体验，尤其是那些使用低端设备的用户。

前几天，我在看自己网站的性能报告时，就注意到了这个警告。不过，吸引我注意的不是 DOM 元素的总数，而是它下面一个指标：最大 DOM 深度。

上周我写周报时，花了很多时间研究树形数据结构，所以时间复杂度和树的深度之间的关系我还记得很清楚。看到这个指标，我马上就想：

🤔 DOM 深度会影响渲染性能吗？

我们都知道，DOM 是树状结构，树的深度会影响查找元素的速度。看看下面这两棵 DOM 树：

两棵树的元素数量相同，但深度（或者说高度）不同，一棵是 2，另一棵是 6。树越深，访问其中的元素就需要更多操作。

举个例子，假设我们要从根节点开始访问元素。在浅树上，只需要两步：找到的子元素数组，然后访问索引 4 处的子元素：

body.children[4];

但在深树上，需要六步才能找到同一个元素：

body.children[0].children[0].children[0].children[0].children[0];

当我们处理二叉搜索树 (BST) 这类数据结构时，树的高度就很重要。为了保证查找等操作的效率，很多数据结构都实现了自平衡 BST，以便在树增长时保持其高度最小。

回到 DOM，理论上，树越深，速度就越慢。但实际情况如何呢？

我做了个小实验来验证一下。

一个小实验

我创建了两个 HTML 页面，只包含三行文字和 100 个空 div。唯一的区别是，一个页面将所有 div 直接放在文档的 body 中，另一个页面则将 div 嵌套起来。

浅元素树的页面像这样：

<html>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- 95 divs later... -->
    <div>This is the last of 100 divs.</div>
  </body>
</html>

而深树的页面像这样：

<html>
  <body>
    <div>
      <div>
        <div>
          <div>
            <!-- 95 divs later... -->
            <div>This is the last of 100 divs.</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我用 Chrome 浏览器运行了性能测试，结果第一个页面的总加载时间（解析 + 渲染 + 绘制）是 51 毫秒，而第二个页面的加载时间是 53 毫秒。

这结果有点出乎意料，差别竟然这么小！

当然，这个例子不太严谨，因为所有 div 都是空的，浏览器只需要渲染几行文本。但我还是期待看到更大的差异。

幸好，编程的魅力就在于此，我只需改几行代码，就能测试更多 div 的情况。我测试了 200 个、300 个、400 个……一直到 500 个 div 时，性能差异终于明显了。