Sử dụng Trình theo dõi hiệu suất để nhanh chóng nắm được hiệu suất tải và hiệu suất thời gian chạy của trang web.
Tổng quan
Bảng điều khiển Giám sát hiệu suất hiển thị dòng thời gian để vẽ biểu đồ các chỉ số hiệu suất theo thời gian thực. Nhấp vào một chỉ số để hiện hoặc ẩn chỉ số đó. Sau đó, hãy xem biểu đồ thay đổi như thế nào khi bạn tương tác với ứng dụng của mình.
Công cụ giám sát hiệu suất theo dõi các chỉ số sau:
- Mức sử dụng CPU.
- Kích thước vùng nhớ khối xếp JavaScript.
- Tổng số nút DOM, trình nghe sự kiện JavaScript, tài liệu và khung trên trang.
- Bố cục và tính toán lại kiểu mỗi giây.
Mở bảng điều khiển Trình theo dõi hiệu suất
Cách mở bảng Giám sát hiệu suất:
- Mở Công cụ cho nhà phát triển.
- Mở Trình đơn lệnh bằng cách nhấn:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Bắt đầu nhập
Performance monitor, chọn Hiển thị màn hình hiệu suất rồi nhấn phím Enter. Công cụ cho nhà phát triển hiển thị bảng Giám sát hiệu suất ở cuối cửa sổ Công cụ cho nhà phát triển của bạn.
Hoặc ở góc trên cùng bên phải, hãy chọn more_vert Tuỳ chọn khác > Công cụ khác > Giám sát hiệu suất.
Sử dụng bảng điều khiển Giám sát hiệu suất
Trình theo dõi hiệu suất cung cấp thông tin chung về hiệu suất của trang web trong thời gian chạy.
Việc quan sát cách các giá trị của chỉ số thay đổi khi bạn tương tác với trang web của mình có thể giúp bạn tìm ra cơ hội để cải thiện.
Một tính năng hữu ích của Trình theo dõi hiệu suất là duy trì trong suốt quá trình điều hướng trang. Vì vậy, là nhà phát triển giao diện người dùng, bạn có thể tránh được các vấn đề như tình trạng đơ bố cục bằng cách mở Trình theo dõi hiệu suất, cuộn qua trang web của họ và theo dõi Nút DOM và chỉ số Bố cục/giây.
Nếu người dùng báo cáo thời gian tải chậm trên trang web của bạn, thì Trình theo dõi hiệu suất có thể giúp bạn xác định các khu vực có vấn đề.
Ví dụ: mức mức sử dụng CPU tăng đột biến có thể dẫn đến mã không hiệu quả. Nhìn chung, nếu một trang chứa nhiều trình nghe sự kiện JS, thì bạn nên tái cấu trúc mã và giảm những con số đó để giải phóng bộ nhớ.
Nếu bạn mới bắt đầu phân tích hiệu suất, bạn nên sử dụng bảng điều khiển Lighthouse, sau đó tìm hiểu thêm bằng bảng điều khiển Performance (Hiệu suất) hoặc Trình theo dõi hiệu suất.