在 Oxygen Builder 中优化 DOM

ARTRU

2023 年 12 月 23 日

在 Oxygen Builder 中优化 DOM

Oxygen 被誉为当今加载速度最好的 WordPress 网站建设者之一。

最快并不意味着它是最好的。当 2019 年首次推出时，Oxygen Builder 就像一股新鲜空气。它与 WordPress 页面生成器和主题生成器生态系统中的其他功能完全不同。

Oxygen chính là người tiên phong về Builder tốc độ. Cho đến ngày nay có hàng tá Builder mang lại tốc độ đáng kinh ngạc tương tự như Oxygen, điển hình là Bricks, Cwicly, Zion,… Cùng với việc Breakdance sản phẩm mới cùng nhà với Oxygen được ra mắt, có vẻ Oxygen đang dần tụt lại về sau.

但它不会消失，我们需要让它变得更好。

什么是 DOM？

简单来说，DOM就是HTML语言中的测试按钮。

  • 文档节点: 是DOM树中的最高节点，代表整个文档。对于 HTML 文档，根节点通常由标签表示 <html>.
  • 元素节点：这些是代表 HTML 元素的节点，包括诸如此类的标签 <head>, <body>, <section>, <div> 以及许多其他类型的元素。这些标签是 HTML 元素，每个标签都可以包含子节点。
  • 文本节点：HTML 文档中的每个文本段落都将被视为 DOM 树中的一个文本节点。这些文本经常出现在标签中，例如 <p>, <span>，甚至在像这样的标签中 <title> 或者 <h1>。该节点没有子节点。

例如我有这样的 HTML 代码：

<html>
<head></head>
<body>
    <section>
        <h1>heading</h1>
    </section>
</body>
</html>

上面代码的DOM结构可以这样理解：

document
   ├── head
   └── body
         └── section
               └── h1

在那里：

  • document 是 HTML 文档的文档节点。
  • head 和 body 是元素节点。
  • section 是包含子节点的元素节点 h1.
  • h1 是一个文本节点。

大型 DOM 树会降低站点的性能：

  • 网络效率和负载性能： 大型 DOM 树通常包含许多在用户首次加载页面时不可见的节点，这不必要地增加了用户的数据成本并减慢了加载时间。
  • 时间表现： 当用户交互或者页面加载时，浏览器必须是持久化的 重新计算按钮的位置和样式 。大型 DOM 树与复杂的 CSS 规则相结合会减慢渲染速度。
  • 内存性能： 如果您的 JavaScript 使用通用查询选择器，例如 document.querySelectorAll('li')，您可能会意外存储对大量节点的引用，这可能会耗尽用户设备上的可用内存。

如何优化 DOM

读完上面的内容，你可以对网站中的DOM结构有一个基本的了解。

为了优化 DOM，如果没有必要，您需要限制元素的嵌套。

例如上面的例子，标签 <h1> 可以完全独立放置，无需嵌套在里面 <section>

在 Oxygen 中，当您添加一个部分时，它将在内部创建一个额外的容器，并且您无法对内部的容器元素执行任何操作。如果该元素不是全角，这会无意中创建一个额外的 DOM 节点。

Để khắc phục vấn đề này, chúng ta có thể tạo riêng từng loại từ Section → Container bằng công cụ có sẵn trong Oxygen và lưu nó thành “Re-usable part” để dùng mọi lúc , mọi nơi.

可重复使用部件制氧机
可重复使用部件制氧机

创建部分：

  1. 添加新的 DIV 元素。
  2. Primary → Tag → Chọn “section”.
  3. 根据您的喜好自定义边距和填充。
  4. 双击结构栏中的元素对其进行重命名。
  5. Nhấn vào icon cây bút ở Structure → Chọn “Make Re-Usable” → Điền tên phần tử cần lưu và nhấn OK.
ARTRU 型制氧机
ARTRU 型制氧机

创建容器：

  1. 添加新的 DIV 元素。
  2. Primary → Tag → Chọn “section”.
  3. 根据您的喜好自定义边距和填充。
  4. 添加此容器元素 1 类 "ct-section-inner-wrap".
  5. 在本课程中您可以自定义 width = calc(100% - 20px)。 20px 是将内边距平均分为左右两侧，每侧 10px。
  6. 双击结构栏中的元素对其进行重命名。
  7. Nhấn vào icon cây bút ở Structure → Chọn “Make Re-Usable” → Điền tên phần tử cần lưu và nhấn OK.
ARTRU-容器制氧机
ARTRU-容器制氧机

或者您可以导入下面的 json 代码来引用您创建的示例。

部分：

{"component":{"id":14,"name":"ct_div_block","options":{"ct_id":14,"ct_parent":0,"selector":"div_block-14-4205","original":{"tag":"section","margin-top":"50","margin-bottom":"50"},"nicename":"ARTRU-section","activeselector":false},"depth":1},"classes":{}}

容器：

{"component":{"id":16,"name":"ct_div_block","options":{"ct_id":16,"ct_parent":0,"selector":"div_block-16-4205","original":{},"nicename":"ARTRU-container","classes":["ct-section-inner-wrap"],"activeselector":false},"depth":1},"classes":{"ct-section-inner-wrap":{"key":"ct-section-inner-wrap","original":{"width-unit":" ","width":"calc(100% - 20px)"}}}}

评论