顶级 WordPress 插件指南：优化你的博客文章，提升用户体验
lyc054211Elementor 性能提示：缩小 DOM 大小，让网站更快
具有大量 DOM 输出的网站会增加 HTML 的大小，这可能会损害网站的性能。但是，有一些技术可以减少网站的 DOM 大小。本篇文章将探讨如何通过使用各种策略来最小化 HTML 大小，从而增强 Elementor 网站。
理解“DOM 大小过大”问题
DOM （文档对象模型）表示网页的结构。DOM 大小过大通常表示 DOM 结构复杂，通常是由于使用了过多的 HTML 元素、嵌套节点或动态内容注入造成的。包含大量 HTML 元素的页面往往加载缓慢，并且会影响动画和其他用户交互。
DOM 大小对页面性能的影响
较大的 DOM 大小会增加渲染时间，导致页面渲染延迟和加载时间变慢。这是因为浏览器必须解析和渲染每个节点。此外，每个 DOM 节点都需要浏览器内存，这可能会导致系统资源耗尽和内存消耗增加。这可能会导致性能下降，尤其是在低端设备上。
此外，DOM 过大还会导致用户交互迟缓，网站使用过程中响应速度降低。大量的 DOM 元素通常包含许多事件监听器，这会增加开销并减慢用户交互速度。我们不会提及所有原因，但经验法则是 HTML 越大，页面越慢。
如何使用外部工具测量 DOM 大小？
要衡量 DOM 大小对网站性能的影响，可以使用以下工具：
Google Chrome DevTools： 转到“元素”面板检查 DOM 元素及其嵌套深度。使用“性能”选项卡评估渲染性能并发现由 DOM 操作导致的潜在瓶颈。
Lighthouse：Lighthouse 审核提供了对 DOM 大小指标的见解，例如“DOM 大小”、“DOM 深度”和“最大 DOM 深度”，指出了需要改进的领域。
WebPageTest ：评估瀑布图和性能结果中的 DOM 大小指标，以了解 DOM 复杂性和页面加载时间之间的关系。
什么才算是较大的 DOM 尺寸？
Lighthouse使用 DOM 树标记页面，如下所示：
<body>当元素超过818 个节点时发出警告。- 当
<body>元素有超过1,400 个节点时会出现错误。
但是，这些指标将来可能会发生变化。此外，不同的工具可能会设置不同的阈值来警告 DOM 大小过大。
减少 Elementor DOM 大小
Elementor 是一款可视化的拖放式网站构建器，可简化向页面添加元素的过程。使用 Elementor 通常不会对网站的性能产生负面影响。但是，可以采取一些步骤来进一步优化构建的页面。这包括减少可以最小化 DOM 的 HTML 元素数量，而不会影响设计。
为了有效优化，了解 Elementor 布局元素的结构很有用。我们将重点介绍布局元素，因为典型的页面包含数十个这样的元素，因此优化它们会产生更大的影响。
有三种推荐的技术可以优化您的布局元素：
- 从部分/列迁移到容器。
- 使用单个嵌套容器压平容器。
- 尽可能实现全宽而不是盒宽的嵌套容器。
让我们了解有关减少 Elementor DOM 大小的更多信息。
Elementor 元素类型
Elementor 有两种类型的元素：
- 小部件：用来构建网站的所有常规元素，如标题、图像、图标、按钮、分隔线等。
- 布局元素：结构元素，例如部分/列和容器。这些元素包装小部件并将它们分组在一起。
重点关注布局元素，以了解如何减少 DOM 大小。
布局元素的 HTML 结构
在 Elementor 中，每个结构元素由两个<div>标签组成：一个 outer<div>和一个 inner <div>。这一点很重要，因为我们将了解如何减少结构布局元素中的 HTML 元素数量。
部分/列的 HTML 结构：
当使用部分和列时，最终的 HTML 由两个布局级别组成，每个级别有两个<div>元素，两个用于部分，两个用于列。总共，我们用四个<div>元素包装小部件：
<div class="elementor-section">
<div class="elementor-container" >
<div class="elementor-column">
<div class="elementor-widget-wrap">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
</div>
</div>容器的 HTML 结构：
Elementor 引入了容器作为构建具有更精简结构和 DOM 的页面的一种方式。
切换到容器时，生成的 HTML 仅包含两个<div>元素，而不是四个，这意味着可以使用一半的元素获得相同的设计<div>。
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>使用容器扁平化 HTML 结构
过去，网站结构通常采用部分或列。如今，现代网站使用 CSS flex 和 CSS grid 来实现相同的视觉结构，同时减少代码量。为此，Elementor 引入了容器。通过将结构元素转换为容器，可以简化 HTML 结构并消除不必要的冗余。
虽然部分是堆叠在一起的，但列是并排放置的。另一方面，容器可以将内部元素堆叠成一行或一列。可以利用这些差异来优化一些结构。
如果某个部分有多列，转换后的结构将具有单个列方向容器和多个行方向容器。但是，如果某个部分只包含一列，可以在转换为容器时优化此结构。可以消除一个容器级别而不影响设计。DOM 大小减少 50%，从四个<div>元素减少到只有两个。现在将此乘以每个页面的布局元素数量，以计算对您网站的影响。
值得注意的是，可以真正减少嵌套内部部分的部分/列元素的 DOM 大小。在这些情况下，元素<div>在显示小部件之前会使用八级元素。转换为容器可以将其从八级元素减少<div>到四级，在某些情况下可以减少到只有两级元素<div>。
如果仍在使用部分/列布局结构，那么是时候迁移到容器了。这样做的好处大于在迁移过程中投入的工作。为了简化迁移，Elementor 甚至为此提供了一个方便的“转换”按钮。
盒装与全宽
优化 DOM 大小的另一种方法是区分盒装容器和全宽容器。
盒装容器具有最大宽度，因此需要在 Elementor 中使用内部元素<div>。另一方面，向两侧拉伸的全宽容器因此只需要一个<div>元素。
盒装结构：
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>全宽结构：
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>优化嵌套容器结构
现在了解了盒装容器和全宽容器的不同 HTML 结构，可以开始优化我们网站的 DOM 输出，尤其是嵌套其他容器的容器。
下一个优化技巧如下：如果有一个使用盒装宽度的父容器，则可以使所有嵌套容器都具有全宽。这样，你可以获得相同的设计，但 HTML 更少。
<div class="e-con e-con-parent">
<div class="e-con-inner">
<div class="e-con e-con-child">
…
</div>
<div class="e-con e-con-child">
…
</div>
</div>
</div>上面的 HTML 结构有一个带框的父容器。如果两个子容器也带框，则每个容器将由两层<div>元素组成。但如果它们是全宽的，则只会<div>使用一个。
再次强调，只有当父容器被装箱时，此优化才有效。
结论
如你所见，有三种简单的策略可以优化布局元素的 DOM 大小：用容器替换部分/列布局元素；带有单个嵌套容器的容器可以展平；如果使用嵌套容器并且父容器是盒装的，要将所有内部容器设置为全宽。这些策略可以帮助<div>从网站的 HTML 中消除大量不必要的元素，并提高网页的整体性能。
|
© 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
在 Elementor 中实现动态表格：自动更新与自定义样式指南lyc054211
如何在Elementor中优化和自定义站点标识：从标题到徽标的完整指南lyc054211
Elementor无法加载等常见问题及解决方法都有哪些？lyc054211 暂无评论... |
|---|