关于前端:大型DOM结构是如何影响交互性的

首发于公众号大迁世界，欢送关注。📝 每周 7 篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜分享集体守业过程中的趣事

快来收费体验 ChatGpt plus 版本的，咱们出的钱体验地址: https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

没有方法绕过这一点：当你构建一个网页时，该页面肯定会有一个文档对象模型（DOM）。DOM 代表了你页面 HTML 的构造，并为 JavaScript 和 CSS 提供了拜访页面构造和内容的路径。

然而，问题在于 DOM 的大小会影响浏览器疾速和高效地渲染页面的能力。一般来说，DOM 越大，最后渲染该页面以及稍后在页面生命周期中更新其渲染就越低廉。

这在具备十分大的 DOM 的页面上会变得问题重重，因为批改或更新 DOM 的交互会触发低廉的布局工作，从而影响页面疾速响应的能力。低廉的布局工作可能会影响页面从交互到下一次绘制（INP）的速度；如果你心愿页面能疾速响应用户交互，确保你的 DOM 大小只有必要的大小是很重要的。

理解 DOM 元素和 DOM 节点之间的区别十分重要。DOM 元素是指 DOM 树中的一个特定 HTML 元素。DOM 节点与 DOM 元素有重叠的含意，但其定义扩大到包含正文、空白和文本。尽管 Lighthouse 的 DOM 大小审计是指 DOM 节点，但本指南将尽可能地提到 DOM 元素而不是节点。

依据 Lighthouse，当页面的 DOM 大小超过 1400 个节点时，就过大了。当页面的 DOM 超过 800 个节点时，Lighthouse 将开始收回正告。以以下 HTML 为例：

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

在下面的代码中，有四个 DOM 元素：<ul> 元素及其三个 <li> 子元素。你的网页简直必定会有比这更多的节点，因而理解你能够如何管制 DOM 大小是很重要的——以及一旦你让页面的 DOM 尽可能小，其余优化渲染工作的策略。

大型 DOM 以几种形式影响页面性能：

在页面的初始渲染期间。当 CSS 利用于页面时，会创立一个相似于 DOM 的构造，称为 CSS 对象模型（CSSOM）。随着 CSS 选择器特异性的减少，CSSOM 变得更简单，须要更多的工夫来实现绘制网页所需的布局、款式、合成和绘制工作。这减少了页面加载初期交互的提早。
当交互批改 DOM 时，无论是通过元素的插入或删除，还是通过批改 DOM 内容和款式，渲染该更新所需的工作可能会导致十分低廉的布局、款式、合成和绘制工作。与页面的初始渲染一样，CSS 选择器特异性的减少会减少交互导致的 HTML 元素插入到 DOM 时的渲染工作。
当 JavaScript 查问 DOM 时，对 DOM 元素的援用存储在内存中。例如，如果你调用 document.querySelectorAll 来抉择页面上的所有 <div> 元素，如果后果返回大量的 DOM 元素，内存老本可能会相当可观。

所有这些都会影响交互性，但下面列表中的第二项尤为重要。如果一个交互导致 DOM 的扭转，它可能触发大量的工作，从而导致页面上不良的交互到下一次绘制（INP）。

能够用几种形式来测量 DOM 大小。第一种办法是应用 Lighthouse。当你运行一个审计时，以后页面的 DOM 统计信息将呈现在 ”Diagnostics” 题目下的 ”Avoid an excessive DOM size” 审计局部。在这一部分中，你能够看到 DOM 元素的总数、蕴含最多子元素的 DOM 元素，以及最深的 DOM 元素。

更简略的办法是在任何次要浏览器的开发者工具中应用 JavaScript 控制台。要获取 DOM 中 HTML 元素的总数，你能够在页面加载后在控制台中应用以下代码：

document.querySelectorAll('*').length;

请留神，下面的代码片段仅包含 DOM 中 HTML 元素的数量。它不包含 DOM 中的所有节点。

如果你想实时查看 DOM 大小的更新，你也能够使用性能监督工具。应用这个工具，你能够将布局和款式操作（以及其余性能方面）与以后的 DOM 大小进行关联。

果 DOM 的大小靠近 Lighthouse DOM 大小的正告阈值，或者齐全不合格，下一步就是找出如何减小 DOM 的大小，以进步你的页面对用户交互的响应能力，从而改善你网站的交互到下一次绘制（INP）。

如果你在实验室中剖析一个你狐疑与页面 DOM 大小无关的慢速交互，你能够通过抉择标有“从新计算款式”的性能分析器中的任何流动，并察看底部面板中的上下文数据来理解有多少 DOM 元素受到了影响。

在下面的截图中，留神到入选中时，款式从新计算的工作显示了受影响元素的数量。尽管下面的截图显示了一个具备多个 DOM 元素的页面上 DOM 大小对渲染工作影响的极其案例，但这种诊断信息在任何状况下都是有用的，以确定 DOM 的大小是否是响应交互到下一帧绘制所需工夫的限度因素。

除了审查你网站的 HTML 以删除不必要的标记外，减小 DOM 大小的次要办法是减小 DOM 深度。如果你在浏览器开发者工具的“Elements”选项卡中看到像这样的标记，那么你的 DOM 可能不必要地过深：

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

当你看到这样的模式时，你可能能够通过扁平化你的 DOM 构造来简化它们。这样做将缩小 DOM 元素的数量，并可能给你一个机会来简化页面款式。

DOM 深度也可能是你应用的框架的一个症状。特地是，基于组件的框架（如依赖于 JSX 的那些）要求你在父容器中嵌套多个组件。

然而，许多框架容许你通过应用所谓的片段（fragments）来防止嵌套组件。提供片段性能的基于组件的框架包含但不限于以下几种：

React
Preact
Vue
Svelte

通过在你抉择的框架中应用片段，你能够减小 DOM 深度。如果你放心扁平化 DOM 构造对款式有影响，你可能会从应用更古代（和更快）的布局模式（如 flexbox 或 grid）中受害。

即便你致力扁平化你的 DOM 树并移除不必要的 HTML 元素以放弃你的 DOM 尽可能小，它依然可能相当大，并且在响应用户交互时触发大量的渲染工作。如果你发现自己处于这种状况，有一些其余策略你能够思考以限度渲染工作。

你可能处于这样一个地位，即页面的大部分在首次渲染时对用户来说并不可见。这可能是通过在启动时省略 DOM 的那些局部来懒加载 HTML 的一个机会，但在用户与须要最后暗藏的页面局部进行交互时再将它们增加进去。

当浏览器解析你的 CSS 中的选择器时，它必须遍历 DOM 树以理解这些选择器是如何（以及是否）利用于以后布局的。这些选择器越简单，浏览器就须要做更多的工作，以便进行页面的初始渲染，以及如果页面因交互而发生变化时减少款式从新计算和布局工作。

CSS 提供了 content-visibility 属性，这实际上是一种懒加载屏幕外 DOM 元素的办法。当这些元素靠近视口时，它们会依据须要进行渲染。content-visibility 的益处不仅在于大幅缩小了初始页面渲染时的渲染工作量，而且在页面 DOM 因用户交互而扭转时，也会跳过屏幕外元素的渲染工作。

将你的 DOM 大小缩小到只有严格必须的局部是优化网站 INP（Interaction to Next Paint，交互到下一次绘制）的一个好办法。通过这样做，你能够缩小浏览器在 DOM 更新时进行布局和渲染工作所需的工夫。即便你不能有意义地减小 DOM 大小，也有一些技术你能够用来将渲染工作隔离到一个 DOM 子树，例如 CSS containment 和 content-visibility CSS 属性。

无论你如何去做，发明一个最小化渲染工作的环境，以及缩小页面响应交互时所做的渲染工作，后果将是你的网站在用户与其交互时会感觉更加响应灵活。这意味着你的网站将具备更低的 INP，从而转化为更好的用户体验。

首发于公众号大迁世界，欢送关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:大型DOM结构是如何影响交互性的

什么时候页面的 DOM 过大？

大型 DOM 如何影响页面性能？

如何测量 DOM 大小？

如何测量受交互影响的 DOM 元素数量？

如何减小 DOM 大小？

思考其余策略

思考一种增量办法

限度 CSS 选择器的复杂性

应用 content-visibility 属性

论断

交换