Sử dụng Trình giám sát hiệu suất để nhanh chóng biết được hiệu suất tải và 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 biểu thị 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 đó, xem biểu đồ này thay đổi như thế nào khi bạn tương tác với ứng dụng của mình.
Trình 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à phép tính toán lại kiểu mỗi giây.
Mở bảng điều khiển Giám sát hiệu suất
Cách mở bảng điều khiển 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 giám sát hiệu suất rồi nhấn Enter. Công cụ cho nhà phát triển hiển thị bảng điều khiển Giám sát hiệu suất ở cuối cửa sổ Công cụ cho nhà phát triể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 > Trình 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 giám sát hiệu suất đưa ra ý tưởng chung về hiệu suất trong thời gian chạy của trang web.
Khi quan sát cách các giá trị chỉ số thay đổi khi bạn tương tác với trang web, bạn có thể tìm ra cơ hội cải thiện.
Một tính năng hữu ích của Trình giám sát hiệu suất là tính năng này 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 vấn đề như tình trạng đơ bố cục bằng cách mở Trình giám sát hiệu suất, di chuyển qua trang web của họ và theo dõi các chỉ số Nút DOM và 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 giám sát 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 tăng đột biến về mức sử dụng CPU có thể cho thấy mã không hiệu quả. Ngoài ra, 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 số lượng đó để giải phóng bộ nhớ.
Nếu bạn mới bắt đầu với việc phân tích hiệu suất, trước tiên, 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 Hiệu suất hoặc Trình giám sát hiệu suất.