MỤC LỤC

DOM là gì?
Cách tối ưu DOM

Oxygen được biết đến là một trong những Builder website WordPress có tốc độ load tốt nhất hiện nay.

Nhanh nhất không có nghĩa nó là tốt nhất. Thời gian đầu ra mắt năm 2019, Oxygen Builder như một làn gió mới. Nó hoàn toàn khác biệt so với phần còn lại trong hệ sinh thái Page Builder, Theme Builder của 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.

Nhưng nó sẽ không mất đi, chúng ta cần làm cho nó tốt hơn.

DOM là gì?

Hiểu nôm na DOM là các nút phần thử trong ngôn ngữ HTML.

Nút gốc (document node): là nút cao nhất trong cây DOM, đại diện cho toàn bộ tài liệu. Trong trường hợp của tài liệu HTML, node gốc thường được biểu diễn bằng thẻ <html>.
Nút phần tử (element node): đây là các nút đại diện cho các phần tử HTML, bao gồm các thẻ như <head>, <body>, <section>, <div> và nhiều loại phần tử khác. Các thẻ này là các phần tử HTML, và mỗi thẻ có thể chứa các nút con.
Nút văn bản (text node): mỗi đoạn văn bản trong tài liệu HTML sẽ được xem như một nút văn bản trong cây DOM. Các đoạn văn bản này thường xuất hiện trong các thẻ như <p>, <span>, và thậm chí cả trong các thẻ như <title> hoặc <h1>. Node này không có các nút con.

Ví dụ tôi có mã HTML như thế này:

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

Cấu trúc DOM của mã trên sẽ được hiểu như thế này:

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

Trong đó:

document là nút gốc (document node) của tài liệu HTML.
head và body là các nút phần tử (element node).
section là nút phần tử có chứa nút con h1.
h1 là nút văn bản (text node).

Cây DOM lớn có thể làm chậm hiệu suất trang web của bạn:

Hiệu quả mạng và hiệu suất tải: Cây DOM lớn thường bao gồm nhiều nút không hiển thị khi người dùng tải trang đầu tiên, điều này sẽ làm tăng chi phí dữ liệu một cách không cần thiết cho người dùng và làm chậm thời gian tải.
Hiệu suất thời gian: Khi người dùng tương tác hay khi tải trang, trình duyệt phải liên tục tính toán lại vị trí và kiểu dáng của các nút . Cây DOM lớn kết hợp với các quy tắc CSS phức tạp có thể làm chậm quá trình hiển thị.
Hiệu suất bộ nhớ: Nếu JavaScript của bạn sử dụng bộ chọn truy vấn chung như document.querySelectorAll('li'), bạn có thể vô tình lưu trữ các tham chiếu đến một số lượng rất lớn các nút, có thể lấn át bộ nhớ khả dụng trên thiết bị của người dùng.

Cách tối ưu DOM

Sau khi đọc phần trên, bạn có thể hiểu sơ sơ về cấu trúc DOM trong website.

Để tối ưu DOM bạn cần hạn chế lồng các phần tử vào nhau nếu không cần thiết.

Ví dụ như trên, thẻ <h1> hoàn toàn có thể nằm riêng mà không cần lồng vào trong <section>

Trong Oxygen khi bạn thêm 1 section nó sẽ tự tạo thêm 1 container bên trong và bạn không thể thao tác gì với phần tử container bên trong đó. Điều này vô hình chung làm thừa ra 1 nút DOM nếu như phần tử đó không làm kiểu Full-width.

Để 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.

Tạo Section:

Thêm 1 phần tử DIV mới.
Primary → Tag → Chọn "section".
Tùy chỉnh margin, padding theo ý của bạn.
Click đúp vào phần tử ở thanh Structure để đổi tên.
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.

Tạo Container:

Thêm 1 phần tử DIV mới.
Primary → Tag → Chọn "section".
Tùy chỉnh margin, padding theo ý của bạn.
Thêm phần tử container này 1 Class "ct-section-inner-wrap".
Tại Class này bạn tùy chỉnh width = calc(100% - 20px). 20px chính là phần padding chia đều 2 bên trái phải, mỗi bên 10px.
Click đúp vào phần tử ở thanh Structure để đổi tên.
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.

Hoặc bạn có thể Import mã json dưới này để tham khảo mẫu mình đã tạo.

Section:

{"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":{}}

Container:

{"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)"}}}}

Vô hiệu hóa Translatepress trong Oxygen Builder

Quảng cáo

BÌNH LUẬN

Tối ưu DOM trong Oxygen Builder

DOM là gì?

Cách tối ưu DOM