<返回更多

大型DOM结构是如何影响交互性的

2023-09-25  51CTO  
加入收藏

没有办法绕过这一点:当你构建一个网页时,该页面一定会有一个文档对象模型(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以几种方式影响页面性能:

所有这些都会影响交互性,但上面列表中的第二项尤为重要。如果一个交互导致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)来避免嵌套组件。提供片段功能的基于组件的框架包括但不限于以下几种:

通过在你选择的框架中使用片段,你可以减小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,从而转化为更好的用户体验。

关键词:DOM      点击(6)
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多DOM相关>>>