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

  • 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 nút. Cây DOM lớn kết hợp với các quy tắc định kiểu phức tạp có thể làm chậm quá trình kết xuất một cách nghiêm trọng.

  • 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ể vô tình lưu trữ thông tin 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ớ của thiết bị của người dùng.

Cách quy trình 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 đó:

Ảnh chụp màn hình Lighthouse tránh việc kiểm tra kích thước DOM quá mức

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

  • Cảnh báo khi phần tử nội dung có nhiều 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

Nhìn chung, bạn chỉ cần tìm cách tạo các nút DOM khi cần và huỷ bỏ các nút khi không cần dùng 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ẽ được hiển 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 một lượt tương tác có liên quan của người dùng, chẳng hạn như thao tác cuộn hoặc nhấp vào nút.

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

Nếu 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 hiển thị 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 việc tính toán kiểu của Google để biết thêm thông tin.

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 bằng Component Dev Kit (CDK).

Thể hiện cảm xúc

  • 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 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 các hiệu ứng cho đến khi một số phần phụ thuộc nhất định đã thay đổi nếu bạn đang sử dụng hook Effect để cải thiện hiệu suất của thời gian chạy.

Tài nguyên