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 đó:
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ặcReact.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.