DOM (Mô hình đối tượng tài liệu) là tên chung cho cấu trúc cây của các thẻ HTML. Tác động của nó đến tốc độ trang là cấu trúc HTML của bạn càng phức tạp trong quá trình hiển thị trang thì trang của bạn sẽ càng chậm.
Theo Lighthouse, sự phức tạp của Cấu trúc DOM được đo bằng ba số liệu. Để cung cấp các số liệu này cùng với các điểm tham chiếu của chúng:
- Tổng số thẻ phải là ít hơn 1500
- Độ sâu thẻ tối đa phải là ít hơn 32
- Số lượng thẻ con tối đa phải là ít hơn 60
Trong ví dụ trên, tổng số thẻ kém, độ sâu thẻ tối đa là tốt nhưng số lượng thẻ con tối đa lại kém.
Việc tối ưu hóa các phần tử DOM hoàn toàn là trách nhiệm của các bên liên quan ở giao diện người dùng. Mỗi thẻ được chọn ngẫu nhiên hoặc tùy ý khi mã trang được tạo lần đầu tiên sẽ có chi phí sau khi dự án hoàn thành. Vì vậy, chúng tôi mời tất cả các nhà phát triển giao diện người dùng hãy im lặng và mở mang tầm mắt.
Các điểm mà DOM tăng cao ảnh hưởng tiêu cực đến hiệu suất trang bao gồm:
- Các trang có số lượng nút (thẻ) lớn sẽ gặp phải tắc nghẽn mạng và khó tải do kích thước lớn của chúng, do đó tăng TTFB (Thời gian đến Byte đầu tiên).
- Hiển thị các nút đã tải để tạo vị trí và phong cách của họ cần có thời gian, do đó làm tăng FCP (Sơn có nội dung đầu tiên).
- Khi số lượng nút tăng lên, tải cần thiết với Các thao tác JavaScript gây gánh nặng cho bộ nhớ, tăng TFT (Thời gian tương tác).
Để minh họa việc tối ưu hóa DOM bằng một ví dụ rất đơn giản, hãy xem xét trường hợp sau trong đó cả số lượng và độ sâu của DOM đều giảm:
<div id="nav-element">
<ul>
</ul>
</div>Thay vì làm điều này:
<ul id="nav-element">
</ul>
Điều cần thiết là phải làm điều này: Hai phương pháp được khuyên dùng nhiều nhất để giảm kích thước DOM là lười tải và phân trang. Vì cấu trúc thẻ trên các trang danh sách chứa nhiều DOM nên nên cuộn hoặc phân trang vô hạn. Khi quyết định số lượng mục trong phân trang, tiêu chí đo lường DOM chắc chắn cần được xem xét. Thời gian thường được coi là số lượng sản phẩm phân trang là 15-20 giây, nhưng phần này thực sự phải được tính toán từ phía các bên liên quan ở giao diện người dùng, xem xét kích thước DOM.
Một trong những giải pháp rất đơn giản là không thêm các phần tử không hiển thị trên trang với HTML mà không ẩn chúng bằng CSS. Nếu một phần tử cần được hiển thị, nó sẽ được gọi sau và hiển thị cho người dùng. Bạn nên lưu ý rằng việc ẩn các phần tử bằng CSS sẽ mở rộng DOM.
Nguồn:
