首发于公众号 大迁世界，欢送关注。 每周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以几种形式影响页面性能：
- 在页面的初始渲染期间。当 CSS 利用于页面时，会创立一个相似于 DOM 的构造，称为 CSS 对象模型（CSSOM）。随着CSS选择器特异性的减少，CSSOM变得更简单，须要更多的工夫来实现绘制网页所需的布局、款式、合成和绘制工作。这减少了页面加载初期交互的提早。
- 当交互批改DOM时，无论是通过元素的插入或删除，还是通过批改DOM内容和款式，渲染该更新所需的工作可能会导致十分低廉的布局、款式、合成和绘制工作。与页面的初始渲染一样，CSS选择器特异性的减少会减少交互导致的HTML元素插入到DOM时的渲染工作。
- 当 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。