在 WordPress 中避免过大的 DOM 大小

WordPress 中的 DOM 结构：树、分支和节点

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 大小"。