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à thời gian chạy của trang web.
Tổng quan
Bảng điều khiển Trình giám sát hiệu suất hiển thị tiến trình 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 thị 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.
Trình theo dõi hiệu suất theo dõi các chỉ số sau:
- Mức sử dụng CPU.
- Dung lượng 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.
- Số lần tính toán lại bố cục và kiểu mỗi giây.
Mở bảng điều khiển Trình giám sát hiệu suất
Cách mở bảng điều khiển Trình theo dõi hiệu suất:
- Mở Công cụ cho nhà phát triển.
- Mở trình đơn Command (Lệnh) bằng cách nhấn:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Ctrl+Shift+P
- Bắt đầu nhập
Performance monitor, chọn Show Performance monitor (Hiển thị Trình giám sát hiệu suất) rồi nhấn Enter. Công cụ dành cho nhà phát triển sẽ hiển thị bảng điều khiển Trình theo dõi hiệu suất ở cuối cửa sổ Công cụ dành cho nhà phát triển.
Ngoài ra, ở góc trên cùng bên phải, hãy chọn biểu tượng Tuỳ chọn khác > Công cụ khác > Trình theo dõi hiệu suất.
Sử dụng bảng điều khiển Trình giám sát hiệu suất
Trình theo dõi hiệu suất cung cấp thông tin tổng quan về hiệu suất thời gian chạy của trang web.
Việc quan sát cách các giá trị chỉ số thay đổi khi bạn tương tác với trang web có thể cho thấy những 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à tính năng này vẫn hoạt động trong suốt quá trình điều hướng trang. Vì vậy, với tư cách là nhà phát triển giao diện người dùng, bạn có thể tránh các vấn đề như lỗi bố cục bằng cách mở Trình giám sát hiệu suất, cuộn qua trang web của họ và theo dõi các chỉ số Điểm 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 theo dõi hiệu suất có thể giúp bạn xác định các vấn đề.
Ví dụ: mức sử dụng CPU tăng đột biến có thể cho thấy mã không hiệu quả. Và nói 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 số lượng đó để 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 trước, sau đó tìm hiểu thêm bằng bảng điều khiển Hiệu suất hoặc Trình theo dõi hiệu suất.