Phần Tử Lượng Là Gì? Ảnh Hưởng Của Nó Đến Hiệu Suất Website

Khi xây dựng một trang web, bạn không thể tránh khỏi việc tạo ra một Mô hình Đối tượng Tài liệu (DOM). DOM đại diện cho cấu trúc HTML của trang, cho phép JavaScript và CSS truy cập và thao tác với nội dung và bố cục của trang. Tuy nhiên, bạn có biết “Phần Tử Lượng Là Gì” và kích thước của DOM ảnh hưởng trực tiếp đến hiệu suất website?

Khi Nào DOM Của Một Trang Web Được Coi Là Quá Lớn?

Theo Lighthouse, DOM của một trang được coi là quá lớn khi vượt quá 1400 nút. Lighthouse sẽ bắt đầu cảnh báo khi số lượng nút DOM vượt quá 800. Để hiểu rõ hơn, hãy xem xét ví dụ HTML sau:

<ul>
  <li>Mục danh sách một.</li>
  <li>Mục danh sách hai.</li>
  <li>Mục danh sách ba.</li>
</ul>

Đoạn mã trên chứa 4 phần tử DOM: phần tử <ul> và 3 phần tử <li> con của nó. Các trang web thường có nhiều nút hơn thế, vì vậy việc kiểm soát kích thước DOM là vô cùng quan trọng.

DOM Lớn Ảnh Hưởng Đến Hiệu Suất Trang Như Thế Nào?

DOM lớn ảnh hưởng đến hiệu suất trang theo nhiều cách:

Trong quá trình kết xuất ban đầu: Khi CSS được áp dụng, một cấu trúc tương tự DOM gọi là Mô hình Đối tượng CSS (CSSOM) được tạo. CSSOM phức tạp hơn khi bộ chọn CSS có độ đặc hiệu cao, làm tăng thời gian cần thiết để thực hiện bố cục, tạo kiểu, kết hợp và vẽ. Công việc bổ sung này làm tăng độ trễ tương tác (INP) cho các lượt tương tác xảy ra sớm trong quá trình tải trang.
Khi các hoạt động tương tác sửa đổi DOM: Việc chèn, xóa phần tử hoặc sửa đổi nội dung và kiểu DOM có thể dẫn đến bố cục, tạo kiểu, kết hợp và vẽ tốn kém. Tăng độ đặc hiệu của bộ chọn CSS cũng làm tăng công việc kết xuất khi các phần tử HTML được chèn vào DOM do kết quả của một lượt tương tác.
Khi JavaScript truy vấn DOM: Các tham chiếu đến phần tử DOM được lưu trữ trong bộ nhớ. Ví dụ, việc gọi document.querySelectorAll để chọn tất cả các phần tử <div> trên một trang có thể tốn kém nếu kết quả trả về một số lượng lớn các phần tử DOM.

Tất cả những yếu tố này đều có thể ảnh hưởng đến khả năng tương tác. Nếu một hoạt động tương tác dẫn đến thay đổi đối với DOM, hoạt động đó có thể bắt đầu nhiều công việc, góp phần làm cho INP của một trang trở nên kém hơn. Bạn có thể tham khảo thêm về ghế nhạy cảm là gì để hiểu rõ hơn về trải nghiệm người dùng trên website.

Làm Cách Nào Đo Lường Kích Thước DOM?

Bạn có thể đo kích thước DOM bằng nhiều cách:

Lighthouse: Khi bạn chạy một quy trình kiểm tra Lighthouse, số liệu thống kê về DOM của trang sẽ nằm trong quy trình kiểm tra “Tránh kích thước DOM quá lớn” trong mục “Chẩn đoán”. Bạn sẽ thấy tổng số phần tử DOM, phần tử DOM chứa nhiều phần tử con nhất và phần tử DOM sâu nhất.
Bảng điều khiển JavaScript: Sử dụng bảng điều khiển JavaScript trong các công cụ dành cho nhà phát triển để biết tổng số phần tử HTML trong DOM:
```
document.querySelectorAll('*').length;
```
Công cụ theo dõi hiệu suất: Sử dụng công cụ theo dõi hiệu suất để xem thông tin cập nhật về kích thước DOM theo thời gian thực. Bạn có thể tương quan các thao tác bố cục và tạo kiểu với kích thước DOM hiện tại.

Nếu kích thước DOM đang tiến gần đến ngưỡng cảnh báo của Lighthouse hoặc hoàn toàn không đạt được, bước tiếp theo là tìm cách giảm kích thước DOM để cải thiện khả năng phản hồi của trang đối với hoạt động tương tác của người dùng. Bạn có thể tham khảo thêm về máu dấn là con gì để hiểu hơn về các yếu tố ảnh hưởng đến trải nghiệm người dùng.

Làm Cách Nào Đo Lường Số Lượng Phần Tử DOM Chịu Ảnh Hưởng Của Một Lượt Tương Tác?

Nếu bạn đang lập hồ sơ cho một lượt tương tác chậm trong phòng thí nghiệm, bạn có thể tìm ra số lượng phần tử DOM bị ảnh hưởng bằng cách chọn bất kỳ phần nào của hoạt động trong trình phân tích tài nguyên được gắn nhãn “Recalculate Style” (Tính toán lại kiểu) và quan sát dữ liệu theo bối cảnh trong bảng điều khiển dưới cùng.

Làm Cách Nào Để Giảm Kích Thước DOM?

Ngoài việc kiểm tra HTML để tìm mã đánh dấu không cần thiết, cách chính để giảm kích thước DOM là giảm độ sâu DOM. Một dấu hiệu cho thấy DOM của bạn có thể quá sâu là nếu bạn thấy mã đánh dấu có dạng như sau trong thẻ Phần tử:

<div>
  <div>
    <div></div>
  </div>
</div>

Bạn có thể đơn giản hóa cấu trúc DOM và giảm số lượng phần tử DOM bằng cách làm phẳng cấu trúc DOM. Độ sâu DOM cũng có thể là một triệu chứng của các khung mà bạn sử dụng. Tuy nhiên, nhiều khung cho phép bạn tránh lồng các thành phần bằng cách sử dụng các thành phần được gọi là mảnh. Bằng cách sử dụng các mảnh trong khung bạn chọn, bạn có thể giảm độ sâu DOM.

Các Chiến Lược Khác Cần Cân Nhắc

Ngay cả khi bạn cố gắng làm phẳng cây DOM và xóa các phần tử HTML không cần thiết, DOM vẫn có thể khá lớn và bắt đầu nhiều công việc kết xuất khi thay đổi để phản hồi các hoạt động tương tác của người dùng. Nếu gặp phải trường hợp này, bạn có thể cân nhắc một số chiến lược khác để hạn chế công việc kết xuất.

Cân Nhắc Phương Pháp Bổ Sung

Có thể người dùng không nhìn thấy phần lớn trang của bạn khi trang đó hiển thị lần đầu. Đây có thể là cơ hội để tải HTML một cách trì hoãn bằng cách bỏ qua những phần đó của DOM khi khởi động, nhưng hãy thêm chúng vào khi người dùng tương tác với những phần của trang yêu cầu các khía cạnh ban đầu bị ẩn của trang.

Bạn có thể dễ dàng tìm kiếm stt tìm người yêu trên website của chúng tôi.

Giới Hạn Độ Phức Tạp Của Bộ Chọn CSS

Khi phân tích cú pháp bộ chọn trong CSS, trình duyệt phải duyệt qua cây DOM để hiểu cách thức và liệu những bộ chọn đó có áp dụng cho bố cục hiện tại hay không. Các bộ chọn này càng phức tạp thì trình duyệt càng phải thực hiện nhiều thao tác để thực hiện cả quá trình kết xuất ban đầu của trang, cũng như tăng số lần tính toán lại kiểu và bố cục nếu trang thay đổi do một lượt tương tác.

Sử Dụng Thuộc Tính Content-Visibility

CSS cung cấp thuộc tính content-visibility. Đây là một cách hiệu quả để hiển thị các phần tử DOM ngoài màn hình một cách gián tiếp. Khi các phần tử tiếp cận khung nhìn, chúng sẽ được hiển thị theo yêu cầu. Lợi ích của content-visibility không chỉ giúp giảm đáng kể lượng công việc kết xuất trong quá trình kết xuất trang ban đầu, mà còn bỏ qua công việc kết xuất cho các phần tử ngoài màn hình khi DOM trang thay đổi do hoạt động tương tác của người dùng.

Kết Luận

Giảm kích thước DOM xuống chỉ còn những gì thực sự cần thiết là một cách hay để tối ưu hóa INP của trang web. Bằng cách này, bạn có thể giảm thời gian cần thiết để trình duyệt thực hiện công việc bố cục và hiển thị khi DOM được cập nhật. Ngay cả khi không thể giảm đáng kể kích thước DOM, bạn vẫn có thể sử dụng một số kỹ thuật để tách riêng hoạt động kết xuất thành một cây con DOM, chẳng hạn như tính năng CSS containment và thuộc tính CSS content-visibility.

Tuy nhiên, dù bạn thực hiện theo cách nào, việc tạo ra một môi trường giảm thiểu công việc kết xuất (cũng như giảm lượng công việc kết xuất mà trang của bạn thực hiện để phản hồi các lượt tương tác) sẽ giúp trang web của bạn phản hồi nhanh hơn với người dùng khi họ tương tác với trang web. Điều đó có nghĩa là bạn sẽ có chỉ số INP thấp hơn cho trang web của mình, nhờ đó mang lại trải nghiệm người dùng tốt hơn.