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

Cây DOM lớn có thể làm giả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, điều này làm tăng không cần thiết chi phí dữ liệu cho người dùng 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 dáng 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 quá trình kết xuất và tính tương tác một cách nghiêm trọng.

  • Hiệu suất bộ nhớ

    Nếu JavaScript của bạn sử dụng các bộ chọn truy vấn chung như document.querySelectorAll('li'), bạn có thể vô tình lưu trữ các 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ị người dùng.

Cách bài 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à số lượng phần tử con tối đa của trang:

Tránh kích thước DOM quá lớn. Lighthouse Audit cho thấy tổng số phần tử DOM, độ sâu DOM tối đa và số phần tử con tối đa.
Lighthouse làm nổi bật thông tin chi tiết về kích thước DOM quá lớn

Lighthouse gắn cờ những trang có cây DOM:

  • Cảnh báo khi phần tử body có hơn khoảng 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, hãy tìm cách tạo các nút DOM chỉ khi cần và huỷ các nút khi không còn cầ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à ghi chú theo cách thủ công những nút được 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 chúng sau khi người dùng tương tác có liên quan, chẳng hạn như thao tác 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 khi sửa đổ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 không thể tránh cây DOM lớn, thì 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 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 Kích thước DOM lớn ảnh hưởng đến khả năng tương tác như thế nào và những việc bạn có thể làm để khắc phục vấn đề này.

Hướng dẫn cụ thể theo ngăn xếp

Angular

Nếu bạn đang hiển thị danh sách lớn, hãy sử dụng tính năng cuộn ảo bằng Component Dev Kit (CDK).

Phản ứng

  • Hãy 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 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 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