{"id":4217,"date":"2023-12-23T19:53:19","date_gmt":"2023-12-23T12:53:19","guid":{"rendered":"https:\/\/dev.artru.net\/?p=4217"},"modified":"2023-12-23T22:50:17","modified_gmt":"2023-12-23T15:50:17","slug":"toi-uu-dom-trong-oxygen-builder","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/toi-uu-dom-trong-oxygen-builder\/","title":{"rendered":"Optimize DOM in Oxygen Builder"},"content":{"rendered":"<p>Oxygen is known as one of the WordPress website builders with the best loading speed today.<\/p>\n\n\n\n<p>Fastest doesn&#039;t mean it&#039;s the best. When first launched in 2019, Oxygen Builder was like a breath of fresh air. It is completely different from the rest in the WordPress Page Builder and Theme Builder ecosystem.<\/p>\n\n\n\n<p>Oxygen is the pioneer of Speed Builder. To this day, there are dozens of Builders that offer amazing speeds similar to Oxygen, typically Bricks, Cwicly, Zion,... Along with the release of Breakdance, a new product from the same family as Oxygen, it seems Oxygen is gradually falling behind.<\/p>\n\n\n\n<p>But it won&#039;t go away, we need to make it better.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is DOM?<\/h2>\n\n\n\n<p>Simply put, the DOM is the test buttons in the HTML language.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Document node<\/strong>: is the highest node in the DOM tree, representing the entire document. In the case of HTML documents, the root node is usually represented by a tag&nbsp;<code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;html&gt;<\/code>.<\/li>\n\n\n\n<li><strong>element node<\/strong>: these are nodes that represent HTML elements, including tags like&nbsp;<code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;head&gt;, &lt;body&gt;, &lt;section&gt;, &lt;div&gt;<\/code> and many other types of elements. These tags are HTML elements, and each tag can contain child nodes.<\/li>\n\n\n\n<li><strong>Text node<\/strong>: each paragraph of text in an HTML document will be considered a text node in the DOM tree. These pieces of text often appear in tags like&nbsp;<code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;p&gt;<\/code>,&nbsp;<code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;span&gt;<\/code>, and even in tags like&nbsp;<code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;title&gt;<\/code>&nbsp;or&nbsp;<code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;h1&gt;<\/code>. This node has no child nodes.<\/li>\n<\/ul>\n\n\n\n<p>For example I have HTML code like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;html&gt;\n&lt;head&gt;&lt;\/head&gt;\n&lt;body&gt;\n    &lt;section&gt;\n        &lt;h1&gt;heading&lt;\/h1&gt;\n    &lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>The DOM structure of the above code will be understood like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">document\n   \u251c\u2500\u2500 head\n   \u2514\u2500\u2500 body\n         \u2514\u2500\u2500 section\n               \u2514\u2500\u2500 h1<\/code><\/pre>\n\n\n\n<p>In there:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-no-translation=\"\" data-no-auto-translation=\"\">document<\/code>&nbsp;is the document node of the HTML document.<\/li>\n\n\n\n<li><code class=\"\" data-no-translation=\"\" data-no-auto-translation=\"\">head<\/code>&nbsp;and&nbsp;<code class=\"\" data-no-translation=\"\" data-no-auto-translation=\"\">body<\/code>&nbsp;are element nodes.<\/li>\n\n\n\n<li><code class=\"\" data-no-translation=\"\" data-no-auto-translation=\"\">section<\/code>&nbsp;is an element node that contains child nodes&nbsp;<code class=\"\" data-no-translation=\"\" data-no-auto-translation=\"\">h1<\/code>.<\/li>\n\n\n\n<li><code class=\"\" data-no-translation=\"\" data-no-auto-translation=\"\">h1<\/code>\u00a0is a text node.<\/li>\n<\/ul>\n\n\n\n<p>Large DOM trees can slow down your site&#039;s performance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Network efficiency and load performance: <\/strong>Large DOM trees often include many nodes that are not visible when the user first loads the page, which unnecessarily increases data costs for the user and slows load times.<\/li>\n\n\n\n<li><strong>Time performance:<\/strong> When the user interacts or when the page loads, the browser must be persistent\u00a0<a href=\"https:\/\/web.dev\/articles\/reduce-the-scope-and-complexity-of-style-calculations\" target=\"_blank\" rel=\"noreferrer noopener\">recalculate the position and style of the buttons\u00a0<\/a>. Large DOM trees combined with complex CSS rules can slow down rendering.<\/li>\n\n\n\n<li><strong>Memory performance: <\/strong>If your JavaScript uses a generic query selector like\u00a0<code data-no-translation=\"\" data-no-auto-translation=\"\">document.querySelectorAll('li')<\/code>, you could accidentally store references to a very large number of nodes, which could overwhelm the available memory on the user&#039;s device.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to optimize DOM<\/h2>\n\n\n\n<p>After reading the above section, you can have a basic understanding of the DOM structure in the website.<\/p>\n\n\n\n<p>To optimize the DOM, you need to limit the nesting of elements if not necessary.<\/p>\n\n\n\n<p>For example above, tag <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;h1&gt;<\/code> Can completely lie on its own without needing to be nested inside <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;section&gt;<\/code><\/p>\n\n\n\n<p>In Oxygen, when you add a section, it will create an additional container inside and you cannot do anything with the container element inside. This unintentionally creates an extra DOM node if that element is not Full-width.<\/p>\n\n\n\n<p>To overcome this problem, we can create each type separately from Section \u2192 Container using the tools available in Oxygen and save it as &quot;Re-usable part&quot; to use anytime, anywhere.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"218\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/12\/Re-usable-part-Oxygen-Builder.png\" alt=\"Re-usable-part Oxygen Builder\" class=\"wp-image-4246\"\/><figcaption class=\"wp-element-caption\">Re-usable-part Oxygen Builder<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Create Section:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a new DIV element.<\/li>\n\n\n\n<li>Primary \u2192 Tag \u2192 Select &quot;section&quot;.<\/li>\n\n\n\n<li>Customize margins and padding to your liking.<\/li>\n\n\n\n<li>Double click on the element in the Structure bar to rename it.<\/li>\n\n\n\n<li>Click on the pen icon in Structure \u2192 Select &quot;Make Re-Usable&quot; \u2192 Enter the name of the element to save and click OK.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1275\" height=\"551\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/12\/ARTRU-section-Oxygen-Builder.png\" alt=\"ARTRU-section Oxygen Builder\" class=\"wp-image-4242\"\/><figcaption class=\"wp-element-caption\">ARTRU-section Oxygen Builder<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Create Container:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a new DIV element.<\/li>\n\n\n\n<li>Primary \u2192 Tag \u2192 Select &quot;section&quot;.<\/li>\n\n\n\n<li>Customize margins and padding to your liking.<\/li>\n\n\n\n<li>Add this container element 1 Class <code data-no-translation=\"\" data-no-auto-translation=\"\">\"ct-section-inner-wrap\"<\/code>.<\/li>\n\n\n\n<li>In this Class you customize <code data-no-translation=\"\" data-no-auto-translation=\"\">width = calc(100% - 20px)<\/code>. 20px is the padding divided equally into the left and right sides, 10px on each side.<\/li>\n\n\n\n<li>Double click on the element in the Structure bar to rename it.<\/li>\n\n\n\n<li>Click on the pen icon in Structure \u2192 Select &quot;Make Re-Usable&quot; \u2192 Enter the name of the element to save and click OK.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1278\" height=\"641\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/12\/ARTRU-container-Oxygen-Builder.png\" alt=\"ARTRU-container Oxygen Builder\" class=\"wp-image-4243\"\/><figcaption class=\"wp-element-caption\">ARTRU-container Oxygen Builder<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Or you can Import the json code below to refer to the sample you created.<\/strong><\/p>\n\n\n\n<p>Section:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">{\"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\":{}}<\/code><\/pre>\n\n\n\n<p>Containers:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">{\"component\":{\"id\":16,\"name\":\"ct_div_block\",\"options\":{\"ct_id\":16,\"ct_parent\":0,\"selector\":\"div_block-16-4205\",\"original\":{},\"nicename\":\"ARTRU-container\",\"classes\":&#91;\"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)\"}}}}<\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>Oxygen \u0111\u01b0\u1ee3c bi\u1ebft \u0111\u1ebfn l\u00e0 m\u1ed9t trong nh\u1eefng Builder website WordPress c\u00f3 t\u1ed1c \u0111\u1ed9 load t\u1ed1t nh\u1ea5t hi\u1ec7n nay. Nhanh nh\u1ea5t kh\u00f4ng c\u00f3 ngh\u0129a n\u00f3 l\u00e0 t\u1ed1t nh\u1ea5t. Th\u1eddi gian [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4258,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-4217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oxygen-builder"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/4217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=4217"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/4217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/4258"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=4217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=4217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=4217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}