关于前端:大型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 元素是指 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 如何影响页面性能？

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

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

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

如何测量 DOM 大小？

能够用几种形式来测量 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 大小对渲染工作影响的极其案例，但这种诊断信息在任何状况下都是有用的，以确定 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 选择器的复杂性

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

应用 content-visibility 属性

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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。