修复 Lighthouse 'avoid excessive-DOM size' 警告

什么是 'excessive-DOM size' Lighthouse 警告？

什么是 Lighthouse 中的 avoid excessive-DOM size 警告？Lighthouse 会标记具有以下任一情况的页面：

• DOM 节点总数超过 1,500 个。
  这意味着页面上有超过 1500 个 HTML 元素。
• 最大节点深度超过 32 层。
  这种情况发生在一个元素嵌套在至少 32 个父元素中时。
• 一个父节点拥有超过 60 个子节点。
  这种情况可能发生在父元素（如表格或列表）拥有超过 60 个子元素（表格行或列表元素）时。

'avoid excessive DOM size' 警告不会直接影响任何 Lighthouse 指标。理论上，具有大型 DOM 的页面可以加载得很快。但在实践中，它们通常并非如此。过大的 DOM 很可能会间接影响重要的 Lighthouse 指标，如 Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS)。

快速回顾：什么是 DOM？

DOM 代表 Document Object Model（文档对象模型）。DOM 是 HTML 的树状对象表示，其中每个 HTML 元素（例如 body 或 h1）都由其自身的节点表示。

什么导致过大的 DOM？

过大的 DOM 可能有多种原因。过大的 DOM 通常由以下原因导致：

• CMS 中编码不佳的插件。
• 由 JavaScript 创建的 DOM 节点。
• 生成臃肿 HTML 的页面构建器（例如：Elementor 或 WP Bakery）。
• 复制粘贴到所见即所得编辑器（如 TinyMCE）中的文本。
• 糟糕的模板编码。

'excessive-DOM size' 如何影响页面速度

大型 DOM 不会直接影响 Lighthouse 指标。但它确实使网页渲染变得不必要地复杂，几乎不可能获得高 Lighthouse 分数。浏览器在将网页显示在屏幕上之前需要做更多的工作。大型 DOM 存在三个问题：

• HTML 的大小更大，因为代码臃肿。这会增加下载页面所需的时间。
• 大型 DOM 会降低渲染性能。浏览器在首次加载以及用户或脚本每次与页面交互时，都需要进行更多的 DOM 计算。
• 通过 JavaScript 与 DOM 交互时，浏览器可能会使用更多的内存。

如何修复 'avoid excessive-DOM size'

要修复 'avoid excessive-DOM size' 警告，首先需要追溯其来源。Lighthouse 会指示最大 DOM 深度和最大子元素的位置。从那里开始，你需要进行一些排查。使用浏览器的 DOM 检查器来检查 DOM。试着找出是什么创建了大量的 DOM 节点。以下是五个常见原因：

1. CMS 中编码不佳的插件。
   当一个插件（例如轮播图或日历插件）创建了大量的 DOM 节点时，你可以考虑用更精简的插件来替换它。
2. 由 JavaScript 创建的 DOM 节点。
   某些 JavaScript（例如聊天组件）可能会向 DOM 中注入大量节点。在这种情况下，移除该 JavaScript 文件或找到具有相同功能的替代方案。
3. 生成臃肿 HTML 的页面构建器
   像 Elementor 或 WP Bakery 这样的页面构建器经常生成包含大量 DOM 节点的臃肿代码。这个问题没有简单的解决方案。页面构建器通常是工作流程的一部分。解决方案包括清理臃肿的代码并改变工作流程。
4. 复制粘贴到所见即所得编辑器中的文本
   大多数所见即所得编辑器（如 TinyMCE）在清理粘贴的代码方面做得很差，尤其是从 Microsoft Word 等其他富文本源粘贴时。它不仅会复制文本，还会复制样式。这些样式可能嵌入在大量的 DOM 节点中。解决这个问题的方法很简单：停止向编辑器中粘贴内容，并清理已有粘贴臃肿文本的页面。
5. 糟糕的（模板）编码。
   当大型 DOM 是由编辑器创建或由模板导致时，情况可能会变得棘手。这意味着臃肿的代码是网站核心的一部分。你需要更换编辑器、重写模板的部分内容，甚至从头开始。

'avoid excessive-DOM size' 的变通方案

有时，如果不重写网站的大部分内容并改变整个工作流程，就无法消除过大的 DOM。以下是一些可以减轻过大 DOM 影响的变通方案。这些变通方案远非完美，在某些情况下可能会带来一系列新的挑战，可能会影响你的 SEO 或索引。

• 懒加载网页的部分内容。
  为了加快初始渲染速度，你可以考虑懒加载网站的部分内容，例如页脚。
• 使用 content-visibility 改善页面渲染。
  CSS content-visibility 属性告诉浏览器跳过样式计算、布局和绘制，直到需要时才执行，这可以减轻过多节点的影响。
• 将大型页面拆分为多个页面。
  当内容本身创建了许多 DOM 节点时，将大型页面拆分为多个页面可以减少 DOM 节点的数量。
• 实现无限滚动。
  无限滚动本质上是懒加载。当滚动浏览重复元素（如图片（Pinterest）或大型数据表格）时，无限滚动可以显著加快页面速度。
• 避免内存密集型 JavaScript。
  当页面上有大量 DOM 节点时，使用 JavaScript 要格外小心。document.getElementsByTagName('div'); 可能会加载大量 DOM 节点，从而增加内存使用量。
• 避免复杂的 CSS 声明。
  当页面上有大量 DOM 节点时，要格外小心复杂的 CSS 声明。div:last-child; 需要检查页面上每个 div 的 last-child 状态。