Tránh kích thước DOM quá lớn

Cây DOM lớn có thể làm chậm hiệu suất trang theo nhiều cách:

• Hiệu suất tải và hiệu suất mạng

  Một 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 lần đầu tiên, điều này làm tăng chi phí dữ liệu cho người dùng một cách không cần thiết và làm chậm thời gian tải.

• Hiệu suất trong thời gian chạy

  Khi người dùng và tập lệnh tương tác với trang của bạn, trình duyệt phải liên tục tính toán lại vị trí và kiểu của các nút. Cây DOM lớn kết hợp với các quy tắc kiểu phức tạp có thể làm chậm đáng kể quá trình kết xuất và tương tác.

• 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 tệp tham chiếu đến một số lượng rất lớn nút, điều này có thể làm quá tải khả năng bộ nhớ của thiết bị của người dùng.

Cách kiểm tra kích thước DOM của Lighthouse không thành công

Lighthouse báo cáo tổng số phần tử DOM cho một trang, độ sâu DOM tối đa của trang và các phần tử con tối đa của trang đó:

Lighthouse gắn cờ các trang có cây DOM:

• Cảnh báo khi phần tử body có nhiều hơn ~800 nút.
• Lỗi khi phần tử body có nhiều hơn ~1.400 nút.

Cách tối ưu hoá kích thước DOM

Nhìn chung, hãy tìm cách chỉ tạo các nút DOM khi cần thiết và huỷ các nút khi không cần thiết nữa.

Nếu bạn đang vận chuyển một cây DOM lớn, hãy thử tải trang của bạn và tự ghi chú những nút nào sẽ hiển thị. Có thể bạn có thể xoá các nút không hiển thị khỏi tài liệu được tải ban đầu và chỉ tạo các nút đó sau khi người dùng tương tác một cách phù hợp, chẳng hạn như cuộn hoặc nhấp vào nút.

Nếu bạn tạo các nút DOM trong thời gian chạy, thì Điểm ngắt thay đổi DOM sửa đổi cây con có thể giúp bạn xác định thời điểm tạo các nút.

Nếu bạn không thể tránh được một cây DOM lớn, thì một phương pháp khác để cải thiện hiệu suất kết xuất là đơn giản hoá bộ chọn CSS. Hãy xem bài viết Giảm phạm vi và độ phức tạp của các phép tính kiểu của Google để biết thêm thông tin.

Để biết thêm thông tin chi tiết, hãy xem bài viết Mức độ ảnh hưởng của kích thước DOM lớn đến khả năng tương tác và những việc bạn có thể làm về vấn đề này.

Hướng dẫn dành riêng cho ngăn xếp

Angular

Nếu bạn đang kết xuất danh sách lớn, hãy sử dụng tính năng cuộn ảo với Component Dev Kit (CDK).

Phản ứng

• Sử dụng thư viện "tạo cửa sổ" như react-window để giảm thiểu số nút DOM được tạo nếu bạn đang hiển thị nhiều phần tử lặp lại trên trang.
• Giảm thiểu các thao tác hiển thị lại không cần thiết bằng cách sử dụng shouldComponentUpdate, PureComponent hoặc React.memo.
• Bỏ qua hiệu ứng cho đến khi một số phần phụ thuộc thay đổi, nếu bạn đang dùng hook Effect để cải thiện hiệu suất trong thời gian chạy.

Tài nguyên

• Mã nguồn cho quy trình kiểm tra Tránh kích thước DOM quá lớn
• Giảm phạm vi và độ phức tạp của các phép tính kiểu