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 của bạn theo nhiều cách:

• Hiệu suất 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 lần đầu tiên, 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 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.

• Hiệu suất bộ nhớ

  Nếu JavaScript sử dụng bộ chọn truy vấn chung như document.querySelectorAll('li'), thì bạn có thể đang vô tình lưu trữ các tệp tham chiếu đến một số lượng rất lớn các nút, điều này có thể làm quá tải khả năng bộ nhớ trên thiết bị của người dùng.

Cách kiểm tra kích thước DOM 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ử nội dung có hơn 800 nút.
• Lỗi khi phần tử nội dung có hơn 1.400 nút.

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

Nói chung, hãy tìm cách tạo các nút DOM chỉ khi cần và huỷ bỏ các nút khi không còn cần đến 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ó lẽ 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 một tương tác có liên quan của người dùng, 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, Điểm ngắt thay đổi DOM thay đổi cây con có thể giúp bạn xác định thời điểm các nút được tạo.

Nếu bạn không thể tránh được cây DOM lớn, 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. Xem nội dung 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, hãy xem bài viết Mức độ ảnh hưởng của kích thước DOM lớn đến tính tương tác và những việc bạn có thể làm để xử lý 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).

Thể hiện cảm xúc

• Sử dụng một thư viện "tạo cửa sổ" như react-window để giảm thiểu số lượng nút DOM được tạo nếu bạn đang kết xuất nhiều phần tử lặp lại trên trang.
• Giảm thiểu hoạt động kết xuất lại không cần thiết bằng cách sử dụng shouldComponentUpdate, PureComponent hoặc React.memo.
• Chỉ bỏ qua hiệu ứng cho đến khi một số phần phụ thuộc thay đổi nếu bạn đang sử 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 quá trình kiểm tra Tránh kích thước DOM quá lớn
• Giảm phạm vi và mức độ phức tạp của việc tính toán kiểu