Tài liệu tham khảo về các tính năng hiệu suất

Kayce Basques

Sofia Emelianova

Trang này cung cấp thông tin tham khảo toàn diện về các tính năng của Công cụ của Chrome cho nhà phát triển liên quan đến việc phân tích hiệu suất.

Xem Bắt đầu phân tích hiệu suất thời gian chạy để biết hướng dẫn hướng dẫn về cách phân tích hiệu suất của trang bằng Công cụ của Chrome cho nhà phát triển.

Ghi lại hiệu suất

Bạn có thể ghi lại thời gian chạy hoặc hiệu suất tải.

Ghi lại hiệu suất thời gian chạy

Ghi lại hiệu suất thời gian chạy khi bạn muốn phân tích hiệu suất của một trang khi trang đang chạy, như thay vì tải.

1. Truy cập vào trang bạn muốn phân tích.
2. Nhấp vào thẻ Hiệu suất trong Công cụ cho nhà phát triển.

3. Nhấp vào biểu tượng Ghi .

   

4. Tương tác với trang. Công cụ cho nhà phát triển ghi lại tất cả hoạt động trên trang xảy ra do tương tác.

5. Nhấp lại vào Ghi hoặc nhấp vào Dừng để dừng ghi.

Ghi lại hiệu suất tải

Ghi lại hiệu suất tải khi bạn muốn phân tích hiệu suất của một trang khi trang đang tải, như thay vì chạy.

1. Truy cập vào trang bạn muốn phân tích.
2. Mở bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển.

3. Nhấp vào Bắt đầu lập hồ sơ và tải lại trang . Trước tiên, Công cụ cho nhà phát triển điều hướng tới about:blank để xoá mọi ảnh chụp màn hình và dấu vết còn lại. Sau đó, Công cụ cho nhà phát triển ghi lại chỉ số hiệu suất trong khi tải lại trang, sau đó tự động dừng việc ghi lại dữ liệu vài giây sau khi tải xong.

   

Công cụ cho nhà phát triển tự động phóng to phần bản ghi diễn ra hầu hết hoạt động.

Trong ví dụ này, bảng điều khiển Hiệu suất cho thấy hoạt động trong khi tải trang.

Chụp ảnh màn hình trong khi quay

Đánh dấu vào hộp Ảnh chụp màn hình để chụp ảnh màn hình của từng khung hình trong khi quay.

Xem phần Xem ảnh chụp màn hình để tìm hiểu cách tương tác với ảnh chụp màn hình.

Buộc thu gom rác trong khi ghi

Khi bạn ghi lại một trang, hãy nhấp vào Thu thập rác cây lau nhà để buộc thu gom rác.

Hiện các chế độ cài đặt ghi

Nhấp vào Cài đặt chụp đến hiển thị thêm các chế độ cài đặt liên quan đến cách Công cụ cho nhà phát triển ghi lại bản ghi hiệu suất.

Tắt mẫu JavaScript

Theo mặc định, kênh Chính của bản ghi sẽ hiển thị các ngăn xếp lệnh gọi chi tiết của JavaScript được gọi trong quá trình ghi. Cách tắt các ngăn xếp lệnh gọi này:

1. Mở trình đơn Cài đặt quay video . Xem phần Hiển thị chế độ cài đặt ghi.
2. Bật hộp kiểm Disable JavaScript Samples (Tắt mẫu JavaScript).
3. Ghi lại trang này.

Các ảnh chụp màn hình sau đây cho thấy sự khác biệt giữa việc tắt và bật mẫu JavaScript. Chiến lược phát hành đĩa đơn Bản chính của bản ghi sẽ ngắn hơn nhiều khi tính năng lấy mẫu bị tắt vì bản ghi này bỏ qua tất cả ngăn xếp lệnh gọi JavaScript.

Ví dụ này cho thấy một bản ghi có mẫu JS đã tắt.

Ví dụ này cho thấy một bản ghi có mẫu JS đã bật.

Điều tiết mạng trong khi ghi

Cách điều tiết mạng trong khi ghi:

1. Mở trình đơn Cài đặt quay video . Xem phần Hiển thị chế độ cài đặt ghi.
2. Đặt Network (Mạng) ở mức điều tiết đã chọn.

Điều tiết CPU trong khi ghi

Cách điều tiết CPU trong khi ghi:

1. Mở trình đơn Cài đặt quay video . Xem phần Hiển thị chế độ cài đặt ghi.
2. Đặt CPU ở mức điều tiết đã chọn.

Chế độ điều tiết có liên quan đến khả năng của máy tính. Ví dụ: tùy chọn giảm tốc độ 2x làm cho CPU hoạt động chậm hơn 2 lần so với khả năng thông thường. Công cụ cho nhà phát triển không thể mô phỏng thực sự CPU của thiết bị di động, bởi vì kiến trúc của thiết bị di động rất khác so với kiến trúc của máy tính để bàn và máy tính xách tay.

Bật số liệu thống kê về bộ chọn CSS

Cách xem số liệu thống kê về các bộ chọn quy tắc CSS trong các sự kiện Tính toán lại kiểu diễn ra trong thời gian dài:

1. Mở trình đơn Cài đặt quay video . Xem phần Hiển thị chế độ cài đặt ghi.
2. Đánh dấu vào hộp Bật số liệu thống kê về bộ chọn CSS.

Để biết thêm thông tin chi tiết, hãy xem cách Phân tích hiệu suất của bộ chọn CSS trong quá trình Tính toán lại các sự kiện Kiểu.

Bật khả năng đo lường vẽ nâng cao

Cách xem khả năng đo lường màu vẽ chi tiết:

1. Mở trình đơn Cài đặt quay video . Xem phần Hiển thị chế độ cài đặt ghi.
2. Chọn hộp kiểm Bật khả năng đo lường vẽ nâng cao.

Để tìm hiểu cách tương tác với thông tin về lớp vẽ, hãy xem Xem lớp phủ và Xem lớp vẽ trình phân tích tài nguyên.

Mô phỏng tính năng đồng thời phần cứng

Để kiểm thử hiệu suất của ứng dụng dựa trên nhiều lõi xử lý, bạn có thể định cấu hình giá trị do thuộc tính navigator.hardwareConcurrency báo cáo. Một số ứng dụng dùng thuộc tính này để kiểm soát mức độ song song của ứng dụng, chẳng hạn như để kiểm soát kích thước nhóm pthread của Emscripten.

Cách mô phỏng tính năng đồng thời phần cứng:

1. Mở trình đơn Cài đặt quay video . Xem phần Hiển thị chế độ cài đặt ghi.
2. Đánh dấu mục Tính năng đồng thời phần cứng và đặt số lượng lõi trong hộp nhập.

Công cụ cho nhà phát triển hiển thị biểu tượng cảnh báo bên cạnh thẻ Hiệu suất để nhắc bạn rằng tính năng mô phỏng đồng thời phần cứng đã được bật.

Để chuyển về giá trị mặc định 10, hãy nhấp vào nút Huỷ bỏ .

Lưu bản ghi

Để lưu một bản ghi âm, hãy nhấp chuột phải rồi chọn Lưu hồ sơ.

Tải một bản ghi

Để tải bản ghi, hãy nhấp chuột phải rồi chọn Tải hồ sơ.

Xoá bản ghi trước đó

Sau khi ghi âm, hãy nhấn vào Xoá bản ghi để xoá bản ghi đó khỏi bảng Hiệu suất.

Phân tích bản ghi hiệu suất

Sau khi bạn ghi lại hiệu suất thời gian chạy hoặc ghi lại hiệu suất tải, thẻ Hiệu suất bảng điều khiển cung cấp nhiều dữ liệu để phân tích hiệu suất của những gì vừa xảy ra.

Thao tác trong bản ghi

Để kiểm tra kỹ bản ghi hiệu suất, bạn có thể chọn một phần của bản ghi, cuộn biểu đồ hình ngọn lửa dài, phóng to và thu nhỏ, cũng như sử dụng đường dẫn để chuyển đổi giữa các mức thu phóng.

Chọn một phần của bản ghi âm

Trong thanh thao tác của bảng Hiệu suất và ở đầu bản ghi, bạn có thể thấy mục Tổng quan về tiến trình với biểu đồ CPU và NET.

Để chọn một phần trong bản ghi âm, hãy nhấp và giữ, sau đó kéo sang trái hoặc phải trên trang Tổng quan về Dòng thời gian.

Cách chọn một phần bằng bàn phím:

1. Tập trung vào kênh Main hoặc bất kỳ kênh nào lân cận.
2. Hãy dùng các phím W, A, S, D để phóng to, di chuyển sang trái, thu nhỏ và di chuyển sang phải.

Cách chọn một phần bằng bàn di chuột:

1. Di chuột qua mục Tổng quan về dòng thời gian hoặc bất kỳ kênh nào (Main và các kênh phụ).
2. Sử dụng hai ngón tay, vuốt lên để thu nhỏ, vuốt sang trái để di chuyển sang trái, vuốt xuống để phóng to và vuốt sang phải để chuyển sang phải.

Tạo breadcrumb (tập hợp liên kết phân cấp) và chuyển đổi giữa các mức thu phóng

Tổng quan về dòng thời gian cho phép bạn tạo nhiều đường dẫn lồng nhau liên tiếp, tăng mức độ thu phóng và sau đó chuyển đến mức đã chọn.

Cách tạo và sử dụng breadcrumb (tập hợp liên kết phân cấp):

1. Trong mục Tổng quan về dòng thời gian, hãy chọn một phần bản ghi.
2. Di chuột qua phần đã chọn rồi nhấp vào nút N mili giây zoom_in. Lựa chọn này sẽ mở rộng để điền vào mục Tổng quan về dòng thời gian. Một chuỗi breadcrumb (tập hợp liên kết phân cấp) bắt đầu tạo ở đầu phần Tổng quan về dòng thời gian.
3. Lặp lại hai bước trước đó để tạo một breadcrumb (tập hợp liên kết phân cấp) khác. Bạn có thể tiếp tục lồng các đường dẫn miễn là phạm vi lựa chọn lớn hơn 5 mili giây.
4. Để chuyển đến mức thu phóng đã chọn, hãy nhấp vào đường dẫn tương ứng trong chuỗi ở đầu mục Tổng quan về Dòng thời gian.

Cuộn biểu đồ hình ngọn lửa dài

Để cuộn biểu đồ hình ngọn lửa dài trong bản nhạc Chính hoặc bất kỳ biểu đồ lân cận nào, hãy nhấp và giữ, sau đó kéo theo bất kỳ hướng nào cho đến khi nội dung bạn đang tìm xuất hiện.

Tìm kiếm hoạt động

Để mở hộp tìm kiếm ở cuối bảng Hiệu suất, hãy nhấn:

• macOS: Command+F
• Windows, Linux: Control+F

Ví dụ này cho thấy một biểu thức chính quy trong hộp tìm kiếm ở dưới cùng tìm kiếm hoạt động bất kỳ bắt đầu bằng E.

Cách di chuyển giữa các hoạt động phù hợp với cụm từ tìm kiếm của bạn:

• Nhấp vào nút expand_less Trước hoặc expand_less Tiếp theo.
• Nhấn tổ hợp phím Shift+Enter để chọn sự kiện trước hoặc Enter để chọn mục tiếp theo.

Bảng Hiệu suất hiển thị một chú thích cho hoạt động đã chọn trong hộp tìm kiếm.

Cách sửa đổi chế độ cài đặt truy vấn:

• Nhấp vào match_case So khớp chữ hoa chữ thường để phân biệt chữ hoa chữ thường của truy vấn.
• Nhấp vào regular_expression Biểu thức chính quy để sử dụng một biểu thức chính quy trong truy vấn của bạn.

Để ẩn hộp tìm kiếm, hãy nhấp vào Huỷ.

Thay đổi thứ tự của các bản nhạc và ẩn chúng

Để sắp xếp dấu vết hiệu suất gọn gàng, bạn có thể thay đổi thứ tự các bản nhạc và ẩn những bản nhạc không liên quan ở chế độ cấu hình kênh.

Cách di chuyển và ẩn kênh:

1. Để chuyển sang chế độ cấu hình, hãy nhấp chuột phải vào tên kênh rồi chọn Định cấu hình kênh.
2. Nhấp vào arrow_upward lên hoặc arrow_downward xuống để di chuyển bản nhạc lên hoặc xuống. Nhấp vào visibility_off để ẩn tùy chọn này.
3. Khi hoàn tất, hãy nhấp vào Hoàn tất việc định cấu hình kênh ở dưới cùng để thoát khỏi chế độ cấu hình.

Xem video để xem quy trình này hoạt động như thế nào.

Bảng điều khiển Hiệu suất lưu cấu hình theo dõi cho các dấu vết mới nhưng không lưu trong các phiên Công cụ cho nhà phát triển tiếp theo.

Xem hoạt động của luồng chính

Sử dụng kênh Chính để xem hoạt động đã diễn ra trên luồng chính của trang.

Nhấp vào một sự kiện để xem thêm thông tin về sự kiện đó trong thẻ Tóm tắt. Bảng điều khiển Hiệu suất có màu xanh dương cho sự kiện đã chọn.

Ví dụ này cho biết thêm thông tin về sự kiện gọi hàm get trong thẻ Tóm tắt.

Đọc biểu đồ hình ngọn lửa

Bảng Hiệu suất thể hiện hoạt động của luồng chính trong biểu đồ hình ngọn lửa. Trục x biểu thị bản ghi theo thời gian. Trục y biểu thị ngăn xếp lệnh gọi. Các sự kiện ở trên cùng gây ra các sự kiện bên dưới.

Ví dụ này minh hoạ một biểu đồ hình ngọn lửa trong kênh Chính. Sự kiện click đã gây ra một lệnh gọi hàm ẩn danh. Sau đó, hàm này được gọi là onEndpointClick_, gọi handleClick_, v.v.

Bảng điều khiển Hiệu suất gán các màu ngẫu nhiên cho tập lệnh để chia nhỏ biểu đồ hình ngọn lửa và giúp biểu đồ dễ đọc hơn. Trong ví dụ trước, các lệnh gọi hàm từ một tập lệnh có màu xanh dương nhạt. Cuộc gọi từ một tập lệnh khác có màu hồng nhạt. Màu vàng đậm hơn biểu thị hoạt động viết tập lệnh, còn sự kiện màu tím biểu thị hoạt động kết xuất. Các sự kiện màu vàng và tím đậm này nhất quán trên tất cả các bản ghi.

Các công việc dài cũng được đánh dấu bằng hình tam giác màu đỏ và với phần hơn 50 mili giây được tô màu đỏ:

Trong ví dụ này, tác vụ mất hơn 400 mili giây, vì vậy phần biểu thị 350 mili giây cuối sẽ được tô màu đỏ, trong khi 50 mili giây ban đầu thì không.

Ngoài ra, kênh Chính cho biết thông tin về hồ sơ CPU được bắt đầu và dừng bằng các hàm trên bảng điều khiển profile() và profileEnd().

Để ẩn biểu đồ hình ngọn lửa chi tiết của các lệnh gọi JavaScript, hãy xem phần Tắt mẫu JavaScript. Khi tắt mẫu JS, bạn sẽ chỉ thấy các sự kiện cấp cao như Event (click) và Function Call.

Theo dõi người khởi tạo sự kiện

Kênh Chính có thể hiển thị các mũi tên kết nối các trình khởi tạo sau đây với những sự kiện mà các trình khởi tạo đó đã tạo ra:

• Vô hiệu hoá kiểu hoặc bố cục -> Tính toán lại kiểu hoặc Bố cục
• Yêu cầu khung ảnh động -> Đã kích hoạt khung ảnh động
• Yêu cầu lệnh gọi lại ở trạng thái rảnh -> Lệnh gọi lại ở trạng thái rảnh
• Cài đặt bộ tính giờ -> Đã kích hoạt bộ tính giờ
• Tạo WebSocket -> Gửi... và Nhận giao tay bắt tay của WebSocket hoặc Huỷ bỏ WebSocket

Để xem các mũi tên, hãy tìm yếu tố khởi tạo hoặc sự kiện mà yếu tố đó gây ra trong biểu đồ hình ngọn lửa rồi chọn yếu tố đó.

Khi được chọn, thẻ Tóm tắt sẽ hiển thị các đường liên kết Trình khởi tạo cho đối với trình khởi tạo và đường liên kết Được khởi tạo bởi cho các sự kiện mà trình khởi tạo đã tạo ra. Hãy nhấp vào các sự kiện đó để chuyển đổi giữa các sự kiện tương ứng.

Ẩn các hàm và thành phần con trong biểu đồ hình ngọn lửa

Để sắp xếp gọn gàng biểu đồ hình ngọn lửa trong luồng Chính, bạn có thể ẩn các hàm đã chọn hoặc các hàm con:

1. Trong kênh Main, hãy nhấp chuột phải vào một hàm rồi chọn một trong các lựa chọn sau hoặc nhấn phím tắt tương ứng:

   • Ẩn hàm (H)
   • Ẩn các phần tử con (C)
   • Ẩn các phần tử con lặp lại (R)
   • Đặt lại con (U)
   • Đặt lại dấu vết (T)
   • Thêm tập lệnh vào danh sách bỏ qua (I)

   

   Nút thả xuống arrow_drop_down sẽ xuất hiện bên cạnh tên hàm có các phần tử con bị ẩn.

2. Để xem số lượng phần tử con bị ẩn, hãy di chuột qua nút thả xuống arrow_drop_down.

   

3. Để đặt lại một hàm có phần tử con bị ẩn hoặc toàn bộ biểu đồ hình ngọn lửa, hãy chọn hàm đó rồi nhấn phím U hoặc nhấp chuột phải vào một hàm bất kỳ rồi chọn Đặt lại dấu vết tương ứng.

Bỏ qua các tập lệnh trong biểu đồ hình ngọn lửa

Để thêm một tập lệnh vào danh sách bỏ qua, hãy nhấp chuột phải vào một tập lệnh trong biểu đồ rồi chọn Thêm tập lệnh vào danh sách bỏ qua.

Biểu đồ thu gọn các tập lệnh bị bỏ qua, đánh dấu các tập lệnh đó là Trên danh sách bỏ qua, rồi thêm chúng vào quy tắc Loại trừ tuỳ chỉnh trong phần cài đặt Cài đặt > Danh sách bỏ qua. Các tập lệnh đã bỏ qua sẽ được lưu cho đến khi bạn xoá chúng khỏi dấu vết hoặc khỏi Quy tắc loại trừ tuỳ chỉnh.

Xem các hoạt động trong bảng

Sau khi ghi lại một trang, bạn không cần chỉ dựa vào kênh Chính để phân tích các hoạt động. Công cụ cho nhà phát triển cũng cung cấp 3 chế độ xem dạng bảng để phân tích các hoạt động. Mỗi chế độ xem mang đến cho bạn quan điểm về các hoạt động:

• Khi bạn muốn xem các hoạt động gốc dẫn đến nhiều công việc nhất, hãy sử dụng Cây cuộc gọi .
• Khi bạn muốn xem các hoạt động mà bạn trực tiếp dành nhiều thời gian nhất, hãy sử dụng Thẻ Từ dưới lên.
• Khi bạn muốn xem các hoạt động theo thứ tự diễn ra trong quá trình ghi, hãy sử dụng thẻ Nhật ký sự kiện.

Để giúp bạn tìm thấy thông tin bạn cần nhanh hơn, cả ba thẻ đều có các nút để lọc nâng cao bên cạnh thanh Bộ lọc:

• match_case Khớp chữ hoa/chữ thường.
• regular_expression Biểu thức chính quy.
• match_word Khớp toàn bộ từ.

Mỗi chế độ xem dạng bảng trong bảng điều khiển Hiệu suất hiển thị các đường liên kết cho các hoạt động, chẳng hạn như lệnh gọi hàm. Để giúp bạn gỡ lỗi, Công cụ cho nhà phát triển sẽ tìm nội dung khai báo hàm tương ứng trong tệp nguồn. Ngoài ra, nếu có và bật bản đồ nguồn thích hợp, Công cụ cho nhà phát triển sẽ tự động tìm các tệp gốc.

Nhấp vào một đường liên kết để mở một tệp nguồn trong bảng điều khiển Sources (Nguồn).

Lưu ý: Cả ba phần tiếp theo đều đề cập đến cùng một bản minh hoạ. Bạn có thể tự chạy bản minh hoạ tại Bản minh hoạ về thẻ hoạt động và xem nguồn tại GoogleChrome/devtools-samples/perf/activitytabs.html.

Hoạt động gốc

Dưới đây là nội dung giải thích về khái niệm hoạt động gốc được đề cập trong thẻ Cây cuộc gọi, Thẻ Từ dưới lên và Nhật ký sự kiện.

Hoạt động gốc là những hoạt động khiến trình duyệt thực hiện một số hoạt động. Ví dụ: khi bạn nhấp vào một trình duyệt sẽ kích hoạt một hoạt động Event làm hoạt động gốc. Khi đó, Event có thể khiến trình xử lý để thực thi.

Trong biểu đồ hình ngọn lửa của bản nhạc Chính, các hoạt động gốc nằm ở đầu biểu đồ. Trong cuộc gọi Thẻ Cây và Nhật ký sự kiện, hoạt động gốc là các mục cấp cao nhất.

Hãy xem thẻ Cây lệnh gọi để biết ví dụ về hoạt động gốc.

Thẻ Cây cuộc gọi

Sử dụng thẻ Cây cuộc gọi để xem hoạt động gốc nào gây ra nhiều công việc nhất.

Thẻ Call Tree (Cây cuộc gọi) chỉ cho thấy các hoạt động trong phần đã chọn của bản ghi. Xem Chọn một phần của bản ghi để tìm hiểu cách chọn các phần.

Trong ví dụ này là cấp cao nhất của các mục trong cột Hoạt động, chẳng hạn như Event, Paint và Composite Layers là hoạt động gốc. Lồng ghép đại diện cho ngăn xếp lệnh gọi. Trong trong ví dụ này, Event đã gây ra Function Call, gây ra button.addEventListener, gây ra b, và cứ tiếp tục như vậy.

Thời gian tự động thể hiện thời gian trực tiếp dành cho hoạt động đó. Tổng thời gian biểu thị thời gian dành cho hoạt động đó hoặc bất kỳ phần tử con nào của hoạt động đó.

Nhấp vào Thời gian tự động, Tổng thời gian hoặc Hoạt động để sắp xếp bảng theo cột đó.

Sử dụng hộp Bộ lọc để lọc các sự kiện theo tên hoạt động.

Theo mặc định, trình đơn Nhóm được đặt thành Không tạo nhóm. Sử dụng trình đơn Nhóm để sắp xếp bảng hoạt động dựa trên nhiều tiêu chí.

Nhấp vào Hiển thị ngăn xếp nặng nhất để hiển thị một bảng khác ở bên phải bảng Activity. Nhấp vào một hoạt động để điền Bảng Ngăn xếp nặng nhất. Bảng Ngăn xếp nặng nhất cho bạn biết thành phần con nào của những ngăn xếp được chọn mất nhiều thời gian thực thi nhất.

Thẻ Từ dưới lên

Sử dụng thẻ Từ dưới lên để xem hoạt động nào trực tiếp chiếm nhiều thời gian tổng hợp nhất.

Thẻ Bottom-Up (Từ dưới lên) chỉ hiển thị các hoạt động trong phần đã chọn của bản ghi. Xem Chọn một phần của bản ghi để tìm hiểu cách chọn các phần.

Trong biểu đồ hình ngọn lửa chính của ví dụ này, bạn có thể thấy hầu hết tất cả thời gian thực thi 3 lệnh gọi đến wait(). Theo đó, hoạt động hàng đầu trong Thẻ Bottom-Up (Từ dưới lên) là wait. Trong biểu đồ hình ngọn lửa, màu vàng bên dưới các lệnh gọi đến wait thực ra là hàng nghìn lệnh gọi Minor GC. Do đó, bạn có thể thấy rằng trong Thẻ Bottom-Up (Từ dưới lên), hoạt động đắt nhất tiếp theo là Minor GC.

Cột Thời gian tự động thể hiện thời gian tổng hợp trực tiếp dành cho hoạt động đó, trên tất cả lần xuất hiện.

Cột Tổng thời gian thể hiện thời gian tổng hợp dành cho hoạt động đó hoặc của bất kỳ hoạt động con nào.

Thẻ Nhật ký sự kiện

Sử dụng thẻ Nhật ký sự kiện để xem các hoạt động theo thứ tự diễn ra trong bản ghi.

Thẻ Nhật ký sự kiện chỉ hiển thị các hoạt động trong phần đã chọn của bản ghi. Xem Chọn một phần của bản ghi để tìm hiểu cách chọn các phần.

Cột Thời gian bắt đầu thể hiện thời điểm mà hoạt động đó bắt đầu, so với thời điểm bắt đầu của bản ghi. Thời gian bắt đầu của 1573.0 ms cho mục đã chọn trong ví dụ này có nghĩa là hoạt động đã bắt đầu sau 1573 mili giây kể từ khi bắt đầu ghi.

Cột Thời gian tự động thể hiện thời gian trực tiếp dành cho hoạt động đó.

Cột Tổng thời gian thể hiện thời gian trực tiếp dành cho hoạt động đó hoặc trong bất kỳ trẻ em.

Nhấp vào Thời gian bắt đầu, Thời gian tự động hoặc Tổng thời gian để sắp xếp bảng theo cột đó.

Sử dụng hộp Bộ lọc để lọc các hoạt động theo tên.

Sử dụng trình đơn Thời lượng để lọc ra mọi hoạt động mất dưới 1 mili giây hoặc 15 mili giây. Theo mặc định trình đơn Thời lượng được đặt thành Tất cả, nghĩa là tất cả các hoạt động đều hiển thị.

Tắt các hộp đánh dấu Loading (Tải), Scripting (Tập lệnh), Rendering (Kết xuất) hoặc Painting (Sơn) để lọc tất cả hoạt động thuộc các danh mục đó.

Xem dấu thời gian

Trên kênh Thời gian, hãy xem các điểm đánh dấu quan trọng như:

• Hiển thị đầu tiên (FP)
• Nội dung đầu tiên hiển thị (FCP)
• Nội dung lớn nhất hiển thị (LCP)
• Sự kiện DOMContentLoaded (DCL)
• Sự kiện Onload (L)
• Các cuộc gọi performance.mark() tuỳ chỉnh của bạn. Một nhãn riêng lẻ có chú giải công cụ được hiển thị bên dưới với tốc độ 813,44 mili giây, có nhãn Bắt đầu chạy JavaScript.
• Các cuộc gọi performance.measure() tuỳ chỉnh của bạn. Khoảng màu vàng được hiển thị bên dưới, được gắn nhãn Tương tác chậm.

Chọn một điểm đánh dấu để xem thêm thông tin chi tiết trong thẻ Tóm tắt, bao gồm cả dấu thời gian, tổng thời gian, thời gian tự thực hiện và đối tượng detail.

Xem lượt tương tác

Xem các hoạt động tương tác của người dùng trên kênh Tương tác để theo dõi các vấn đề tiềm ẩn về khả năng phản hồi.

Cách xem lượt tương tác:

1. Ví dụ: Mở Công cụ cho nhà phát triển trên trang minh hoạ này.
2. Mở bảng Hiệu suất rồi bắt đầu ghi lại.
3. Nhấp vào một thành phần (cà phê) rồi dừng quá trình ghi.
4. Tìm kênh Lượt tương tác trong tiến trình.

Trong ví dụ này, kênh Tương tác cho thấy hoạt động tương tác Pointer. Các tương tác có râu cho biết độ trễ đầu vào và trình bày tại ranh giới thời gian xử lý. Hãy di chuột qua hoạt động tương tác đó để xem chú thích có độ trễ khi nhập dữ liệu, thời gian xử lý và độ trễ khi trình bày.

Kênh Lượt tương tác cũng hiển thị cảnh báo Lượt tương tác với nội dung hiển thị tiếp theo (INP) đối với những lượt tương tác dài hơn 200 mili giây trong thẻ Tóm tắt và trong phần chú thích khi di chuột lên:

Kênh Tương tác đánh dấu các lượt tương tác trong hơn 200 mili giây bằng một hình tam giác màu đỏ ở góc trên cùng bên phải.

Xem hoạt động GPU

Bạn có thể xem hoạt động của GPU trong phần GPU.

Xem hoạt động tạo đường quét

Xem hoạt động đường quét trong phần Nhóm luồng.

Phân tích khung hình/giây (FPS)

Công cụ cho nhà phát triển cung cấp nhiều cách phân tích khung hình/giây:

• Sử dụng phần Khung để xem thời lượng của một khung hình cụ thể.
• Sử dụng máy đo FPS để ước tính FPS theo thời gian thực khi trang chạy. Xem bài viết Xem khung hình/giây theo thời gian thực thông qua định dạng FPS (khung hình/giây).

Mục Frames (Khung)

Phần Khung cho bạn biết chính xác thời lượng của một khung hình cụ thể.

Di chuột qua một khung để xem phần chú thích chứa thêm thông tin về khung đó.

Ví dụ này hiển thị chú thích khi bạn di chuột qua một khung.

Phần Khung có thể hiển thị 4 loại khung:

1. Khung không hoạt động (màu trắng). Không có thay đổi nào.
2. Khung hình (xanh lục). Hiển thị đúng như dự kiến và kịp thời.
3. Khung được trình bày một phần (màu vàng với hoa văn đường gạch ngang rộng và thưa thớt). Chrome đã cố gắng hết sức để hiển thị ít nhất một số nội dung cập nhật bằng hình ảnh kịp thời. Ví dụ: trong trường hợp luồng chính trong quy trình kết xuất đồ hoạ (ảnh động canvas) bị trễ nhưng luồng trình tổng hợp (cuộn) đã kịp thời.
4. Khung hình bị rớt (màu đỏ với mẫu đường nét liền đậm). Chrome không thể kết xuất khung hình trong thời gian hợp lý.

Ví dụ này hiển thị chú thích khi bạn di chuột qua một khung được trình bày một phần.

Nhấp vào một khung để xem thêm thông tin về khung đó trong thẻ Tóm tắt. DevTools khung đã chọn bằng màu xanh dương.

Xem các yêu cầu về mạng

Mở rộng mục Mạng để xem một thác nước gồm các yêu cầu mạng xuất hiện trong quá trình ghi lại hiệu suất.

Bên cạnh tên kênh Mạng có một chú giải và các loại yêu cầu được mã hoá bằng màu.

Yêu cầu chặn hiển thị được đánh dấu bằng một hình tam giác màu đỏ ở góc trên bên phải.

Hãy di chuột qua một yêu cầu để xem chú giải công cụ:

• URL của yêu cầu và tổng thời gian cần để thực thi URL đó.
• Mức độ ưu tiên hoặc thay đổi mức độ ưu tiên, ví dụ: Medium -> High.
• Cho biết yêu cầu có phải là Render blocking hay không.
• Thông tin chi tiết về thời gian của yêu cầu, sẽ được mô tả ở phần sau.

Khi bạn nhấp vào một yêu cầu, kênh Network (Mạng) sẽ vẽ một mũi tên từ trình khởi tạo cho yêu cầu đó.

Ngoài ra, bảng Hiệu suất cho bạn thấy thẻ Tóm tắt với nhiều thông tin hơn về yêu cầu, bao gồm nhưng không giới hạn ở các trường Mức độ ưu tiên ban đầu và Mức độ ưu tiên (cuối cùng). Nếu giá trị của chúng khác nhau, thì mức độ ưu tiên tìm nạp của yêu cầu đã thay đổi trong quá trình ghi. Để biết thêm thông tin, hãy xem bài viết Tối ưu hoá việc tải tài nguyên bằng API Tìm nạp mức độ ưu tiên.

Thẻ Tóm tắt cũng cho thấy thông tin chi tiết về thời gian của yêu cầu.

Yêu cầu về www.google.com được biểu thị bằng một đường kẻ ở bên trái (|–), một thanh ở giữa có một phần tối và một phần sáng, một đường ở bên phải (–|).

Bạn có thể xem một bảng chi tiết khác về thời gian trong thẻ Mạng. Nhấp chuột phải vào yêu cầu đó trong kênh Mạng hoặc URL của yêu cầu đó trong thẻ Tóm tắt, rồi nhấp vào Hiển thị trong bảng điều khiển Mạng. Công cụ cho nhà phát triển sẽ đưa bạn đến bảng điều khiển Mạng rồi chọn yêu cầu tương ứng. Mở thẻ Thời gian.

Dưới đây là cách hai bảng chi tiết này kết hợp với nhau:

• Dòng bên trái (|–) là toàn bộ mọi thông tin trong nhóm Connection start sự kiện. Nói cách khác, mục này bao gồm mọi thành phần trước Request Sent.
• Phần sáng của thanh là Request sent và Waiting for server response.
• Phần tối của thanh là Content download.
• Dòng bên phải (–|) là thời gian chờ luồng chính. Mạng > Thẻ Thời gian không hiển thị thông tin này.

Xem các chỉ số về bộ nhớ

Bật hộp đánh dấu Memory (Bộ nhớ) để xem các chỉ số về bộ nhớ của bản ghi gần đây nhất.

Công cụ cho nhà phát triển hiển thị một biểu đồ Bộ nhớ mới, phía trên thẻ Tóm tắt. Ngoài ra còn có một biểu đồ mới bên dưới biểu đồ NET, được gọi là HEAP. Biểu đồ HEAP cung cấp cùng thông tin như JS Dòng của vùng nhớ khối xếp trong biểu đồ Bộ nhớ.

Ví dụ này cho thấy các chỉ số về bộ nhớ phía trên thẻ Tóm tắt.

Các đường màu trên biểu đồ liên kết với các hộp đánh dấu có màu phía trên biểu đồ. Tắt hộp đánh dấu để ẩn danh mục đó khỏi biểu đồ.

Biểu đồ chỉ hiển thị khu vực ghi lại đã được chọn. Trong ví dụ trước, biểu đồ Memory (Bộ nhớ) chỉ cho thấy mức sử dụng bộ nhớ khi bắt đầu ghi, tối đa ở khoảng 1.000 mili giây.

Xem thời lượng của một phần bản ghi

Khi phân tích một mục như Mạng hoặc Chính, đôi khi bạn cần số liệu ước tính chính xác hơn về thời lượng diễn ra các sự kiện nhất định. Giữ phím Shift, nhấp và giữ rồi kéo sang trái hoặc phải để chọn một phần của bản ghi. Ở cuối phần lựa chọn của bạn, Công cụ cho nhà phát triển cho biết thời lượng mà phần đó mất.

Trong ví dụ này, dấu thời gian 488.53ms ở cuối phần đã chọn cho biết khoảng thời gian lấy phần đó.

Xem ảnh chụp màn hình

Xem bài viết Chụp ảnh màn hình trong khi quay để tìm hiểu cách bật ảnh chụp màn hình.

Di chuột qua mục Tổng quan về dòng thời gian để xem ảnh chụp màn hình về giao diện của trang trong khoảnh khắc đó bản ghi. Tổng quan về tiến trình là phần chứa các biểu đồ CPU, FPS và NET.

Bạn cũng có thể xem ảnh chụp màn hình bằng cách nhấp vào một khung hình trong phần Khung. Công cụ cho nhà phát triển hiển thị một phiên bản nhỏ của ảnh chụp màn hình trong thẻ Tóm tắt.

Ví dụ này cho thấy ảnh chụp màn hình cho khung 195.5ms trong thẻ Tóm tắt khi bạn nhấp vào khung đó trong phần Khung.

Nhấp vào hình thu nhỏ trong thẻ Tóm tắt để phóng to ảnh chụp màn hình.

Ví dụ này cho thấy một ảnh chụp màn hình được phóng to sau khi bạn nhấp vào hình thu nhỏ của ảnh đó trong thẻ Tóm tắt.

Xem thông tin về các lớp

Cách xem thông tin về lớp nâng cao về một khung:

1. Bật công cụ vẽ nâng cao.
2. Chọn một khung hình trong phần Khung. Công cụ cho nhà phát triển hiển thị thông tin về các lớp của nó trong thẻ Lớp mới, bên cạnh thẻ Nhật ký sự kiện.

Di chuột qua một lớp để đánh dấu lớp đó trong sơ đồ.

Ví dụ này cho thấy lớp #39 được đánh dấu khi bạn di chuột qua lớp đó.

Cách di chuyển biểu đồ:

• Nhấp vào biểu tượng Chế độ kéo để di chuyển dọc theo trục X và trục Y.
• Nhấp vào Xoay Chế độ để xoay dọc theo trục Z.
• Nhấp vào biểu tượng Đặt lại biến đổi để đặt lại biểu đồ về vị trí ban đầu.

Xem cách hoạt động của tính năng phân tích lớp:

Xem trình phân tích sơn

Cách xem thông tin nâng cao về một sự kiện vẽ:

1. Bật công cụ vẽ nâng cao.
2. Chọn một sự kiện Paint (Sơn) trong kênh Main.

Phân tích hiệu suất kết xuất bằng thẻ Kết xuất

Sử dụng các tính năng của thẻ Hiển thị để giúp trực quan hoá hiệu suất kết xuất của trang.

Mở thẻ Kết xuất.

Xem khung hình/giây theo thời gian thực bằng đồng hồ FPS (khung hình/giây)

Số liệu thống kê kết xuất khung hình là một lớp phủ xuất hiện ở góc trên cùng bên phải khung nhìn. Cung cấp số khung hình trên giây ước tính theo thời gian thực khi trang chạy.

Xem Số liệu thống kê kết xuất khung hình.

Xem sự kiện vẽ theo thời gian thực với tính năng Paint nhấp nháy

Sử dụng Hiệu ứng nhấp nháy để xem tất cả các sự kiện vẽ trên trang theo thời gian thực.

Xem phần Sơn nhấp nháy.

Xem lớp phủ của lớp có Đường viền lớp

Sử dụng Đường viền lớp để xem lớp phủ đường viền lớp và ô ở đầu trang.

Hãy xem phần Đường viền lớp.

Tìm vấn đề về hiệu suất cuộn theo thời gian thực

Sử dụng Vấn đề về hiệu suất cuộn để xác định các phần tử của trang có trình nghe sự kiện liên quan đến việc cuộn có thể gây hại cho hiệu suất của trang. Công cụ cho nhà phát triển giới thiệu các các yếu tố có khả năng có vấn đề trong màu xanh mòng két.

Xem bài viết Các vấn đề về hiệu suất khi cuộn.