DOM（文档对象模型）是 HTML 和 XML 文档的编程接口，也是 HTML 文档结构的名称，由包含对象的分支和节点组成。
文档对象模型的历史可以追溯到 20 世纪 90 年代末 Netscape Navigator 和 Microsoft Internet Explorer 之间所谓的"浏览器大战"，以及 JavaScript 和 JScript，这是第一种在网络浏览器 JavaScript 引擎中广泛实施的脚本语言。
WordPress 中的 DOM 结构：树、分支和节点
WordPress 的 DOM 与其他网站并无太大区别。
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- 树：整个页面以树的形式表示，树上有一个根节点
（<html>）及其子元素。 - 分支：
<div>、<header>、<footer>等元素中的每个元素都代表树的一个分支。 - 节点：所有 HTML 元素
，如<p>、<img>或<a>，都是悬挂在分支上的节点。这些节点可以是内部节点（包含其他节点），也可以是外部节点（树的 "叶子"，没有其他子节点）。
因此，分支的密度取决于组成分支的元素的类型和数量。例如，WordPress 中一个复杂的导航菜单会因为链接和子菜单的数量而产生几层分支和几十个节点。
你可以将节点视为页面上的所有 HTML 元素。元素越多，通常需要的时间就越长，从而导致总块时间(TBT) 增加。
在 WordPress 中，这可能是一个棘手的优化问题，因为您无法简单地删除构成页面结构的 DOM 元素。不过，我们可以有选择性地显示这些元素，并在折叠下方加载一串对象，从而减少 DOM 的整体大小。
为什么要缩小 DOM 的大小？
庞大的 DOM 树会从多个方面拖慢网站的加载速度，通过延长样式计算时间和降低计算速度来增加内存使用量，并为用户带来不必要的数据成本。
这些不同的情况可能包括不必要地加载用户首次加载页面时不可见的节点、不断重复节点位置和样式计算，以及存储过多的节点引用，从而导致用户设备内存超载。
优化页面加载速度的短期和长期好处已在无数文章中阐述过。简而言之，在短期内，你可以避免人们在无聊等待后离开你的网站，而且他们很可能会在你的网站上花费更多的时间。加载速度是谷歌在搜索引擎优化定位中认可的因素之一，据我所知，其他搜索引擎也是如此，因此从长远来看，宝贵的有机流量将会增加。
是什么导致 DOM 体积增大？
DOM 的最终大小受很多因素的影响，例如模板本身、您使用的不同插件添加的内容以及您添加的内容类型，如复杂的块或邪恶的图片 "滑块 "等。此外，所谓的 "建设者"（Builder）等生成的代码也会影响 DOM 的大小。
例如，直到2022 年，我放弃了 Elementor ，因为 它抵制优化，而且几乎每次更新都难得不破坏一些东西，再加上与他们的技术支持有过几次糟糕的经历，这个生成器把网页代码变成了真正的字母汤，成千上万的代码成了噩梦。
同年 4 月，Elementor 将Flexbox "容器 "作为一项全新的革命性新功能纳入其中，而容器作为GenerateBlocks的基础已存在多年。
如何测量 DOM？
为了进行测量，我选择了一个还没有得到很好优化的帖子，它有点长，而且包含不同类型的元素。
让我们从最知名、最流行的PageSpeedInsights 开始。当 body 元素的节点超过800 个时，Google 会将其标记为警告（橙色）；当 body 元素的节点超过1400 个时，Google 会将其标记为错误信息（红色），并建议"避免过大的 DOM 大小"。
根据您分析的每个页面的内容和结构，您或多或少都能找到可以攻击哪些元素的线索。这样做的好处是，它通常会显示指向相关元素的图像。
我想再次提醒您，所有这些提示都只是建议，您不应该恐慌或迷恋这些指标。有些页面提供了良好的用户体验和感知速度，但 PageSpeed 分数却很低。
使用GTmetrix，我们通常会在 DOM 上得到相同的结果。
不过，在这里，他的请求 "瀑布图 "非常有用，可以一目了然地查看按类型和加载时间分类的所有项目。
但最简单快捷的方法是通过任何浏览器。打开要分析的页面，点击右键/"检查"，在 "网络 "选项卡中，你会发现一个更详细的瀑布图 ，因为你可以通过滚动页面来完成它，其中包含的所有文件都会添加进来。然后，您可以按重量、类型、时间等对它们进行排序。
在该窗口下方，您将看到结果摘要。左边是请求数。右侧蓝色部分是 DOMContentLoaded 事件时间，红色部分是该页面的加载时间。
使用 Perfmatters 的 "Lazy Elements "减少 DOM 大小。
Perfmatters 是我推荐不厌的必备插件，它在2024 年 8 月 28 日发布的 2.3.3 版中添加了一个名为 "Lazy Elements"的选项，虽然仍处于测试阶段，但它在简化 DOM 任务方面的效果非常好。
该函数允许通过添加父容器的属性字符串（class="example"）中的任意单个部分，为特定元素及其子元素（子元素）添加名为"Lazy Load"的错误功能。
在Perfmatters提供的有关这一新功能的文档中，我们被警告不要尝试将 "懒加载 "应用于折叠上方的元素。也就是说，加载到屏幕上的内容和用户在不向下滚动的情况下首先看到的内容。
还需要注意的是，如果您发现某些内容在视觉上有破损，请确保您在页面上使用了唯一的字符串，且该字符串不与其他元素共享。
与慢速加载图像一样，内容被放置在 .这意味着，从技术上讲，任何缓慢加载的内容仍可被 Google 抓取和索引。不过，他们无法确定 Google 将如何处理字符串中的 "懒加载 "元素。因此，就搜索引擎优化而言，他们建议先进行测试。
它还警告说，不要尝试对包含启动 "灯箱 "的图片的元素应用 "懒加载 "功能。事实也是如此，我已经能够验证，当实现该功能的元素类被添加到列表中时，WordPress 原生的灯箱 功能就会停止工作。
否则，"Lazy Elements（懒惰元素）"就能完美地工作。多亏了这个功能，我节省了很多时间来精简 DOM，效果很好。我希望Perfmatters能继续开发，改进并扩展其选项。
