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

Connor Clark
Connor Clark
X GitHub

Ngày xuất bản: 8 tháng 10 năm 2025

Một DOM lớn có thể làm các phép tính về kiểu và bố cục dài hơn, ảnh hưởng đến tốc độ phản hồi của trang. DOM lớn cũng làm tăng mức sử dụng bộ nhớ.

Bản thân cây DOM sâu không phải là vấn đề về hiệu suất, tuy nhiên, đây là một triệu chứng của các mẫu thiết kế sử dụng tính năng lồng ghép phần tử không cần thiết.

Thông tin chi tiết này xem xét toàn bộ DOM, kể cả trong các gốc bóng. Thao tác này bỏ qua các nút DOM không phải là phần tử. Thao tác này cũng bỏ qua nội dung <iframe>.

Bạn cần xem xét những gì?

  • Tổng số phần tử: Tổng số phần tử trong DOM của trang.
  • Độ sâu DOM: Độ sâu tối đa của cây DOM.
  • Nhiều phần tử con nhất: Phần tử có nhiều phần tử con nhất.

Cách truyền thông tin chi tiết này

Thông tin chi tiết này chỉ thất bại nếu có một bố cục hoặc kiểu tính toán lại lớn vượt quá thời lượng 40 mili giây.

  • Một bản cập nhật bố cục lớn liên quan đến hơn 100 đối tượng bố cục (tức là các phần tử).
  • Việc tính toán lại kiểu lớn ảnh hưởng đến hơn 300 phần tử.

Khi thất bại, trong bảng điều khiển Hiệu suất, thông tin chi tiết này sẽ làm nổi bật những sự kiện này trong biểu đồ hình ngọn lửa.

Để giảm chi phí của những sự kiện này, hãy làm như sau:

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

Thông tin chi tiết này cũng cung cấp hướng dẫn cụ thể theo ngăn xếp cho những trang sử dụng các công nghệ sau:

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 liệu tham khảo khác