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

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.

Hãy xem bài viết 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 một 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 (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 các hoạt động tương tác của bạn.

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, 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 biểu tượng 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 các chỉ số hiệu suất trong khi trang tải lại, sau đó tự động dừng quá trình ghi 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

Trong khi ghi lại một trang, hãy nhấp vào Thu gom rác chổi để buộc thu gom rác.

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

Nhấp vào biểu tượng Ghi lại các bản ghi hiệu suất để xem các chế độ cài đặt khác 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 các hàm 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. Kênh 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ì loại này bỏ qua tất cả cá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ụ: tuỳ chọn giảm tốc độ gấp 2 lần khiến 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ể thực sự mô phỏng CPU của thiết bị di động vì kiến trúc của thiết bị di động rất khác với kiến trúc của máy tính để bàn và máy tính xách tay.

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 phần Lớp phủ thành phần hiển thị và Xem trình phân tích lớp vẽ.

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 rồi đặt số lượng lõi trong hộp nhập dữ liệu.

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 tạo một bản ghi, hãy nhấn vào biểu tượng Clear recording (Xoá bản ghi) để xoá bản ghi đó khỏi bảng điều khiển Performance (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 trong thời gian chạy hoặc ghi lại hiệu suất tải, bảng điều khiển Hiệu suất sẽ 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. 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 để di 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ỷ.

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.

Ẩ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

   

   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.

Đọ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 -> Kích hoạt 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 WebSocket bắt tay 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.

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 khung hiển thị cung cấp cho bạn một góc nhìn khác nhau về 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 thẻ Cây lệnh gọi.
• Khi bạn muốn xem các hoạt động dành nhiều thời gian trực tiếp nhất, hãy sử dụng thẻ Bottom-Up (Từ dưới lên).
• Khi bạn muốn xem các hoạt động theo thứ tự xảy 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).

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 trang, trình duyệt sẽ kích hoạt hoạt động Event dưới dạng 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 thẻ Cây gọi điện 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. Hãy xem phần 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, 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à các hoạt động gốc. Lồng ghép đại diện cho ngăn xếp lệnh gọi. Trong ví dụ này, Event gây ra Function Call, gây ra button.addEventListener, gây ra b, v.v.

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 của bất kỳ hoạt động con nào.

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 Grouping (Nhóm) để sắp xếp bảng hoạt động dựa trên các tiêu chí khác nhau.

Nhấp vào biểu tượng Hiện ngăn xếp nặng nhất để hiển thị một bảng khác ở bên phải bảng Hoạt động. Nhấp vào một hoạt động để điền vào bảng Naviest Stack (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 hoạt động đã 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. Hãy xem phần 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 trên thanh Chính của ví dụ này, bạn có thể thấy hầu như toàn bộ thời gian dành cho việc thực thi 3 lệnh gọi đến wait(). Theo đó, hoạt động trên cùng 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 sự là hàng nghìn lệnh gọi Minor GC. Theo đó, bạn có thể thấy trong thẻ Bottom-Up (Từ dưới lên), hoạt động tốn kém 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 dành trực tiếp cho hoạt động đó, trong tất cả các lần diễn ra hoạt động.

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 quá trình 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. Hãy xem phần 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 Start Time (Thời gian bắt đầu) biểu thị thời điểm mà hoạt động đó bắt đầu, so với thời điểm bắt đầu ghi. Thời gian bắt đầu 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 sau khi quá trình ghi bắt đầu.

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 biểu thị thời gian dành trực tiếp cho hoạt động đó hoặc trong bất kỳ hoạt động con nào.

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 sẽ 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 (Painting) để lọc tất cả hoạt động thuộc những 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.

Để xem thêm chi tiết trong thẻ Tóm tắt, hãy chọn một điểm đánh dấu. Để xem dấu thời gian của điểm đánh dấu, hãy di chuột lên điểm đánh dấu trên kênh Thời gian.

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 bằng đồng hồ FPS.

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 thời điểm và dự kiến.
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. Công cụ cho nhà phát triển vẽ đường viền cho khung đã chọn bằng màu xanh dương.

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

Mở rộng phần Mạng để xem thác nước các yêu cầu mạng xảy ra trong quá trình ghi.

Các yêu cầu được mã hoá bằng màu như sau:

• HTML: Xanh lam
• CSS: Tím
• JS: Vàng
• Hình ảnh: Xanh lục

Nhấp vào một yêu cầu để xem thêm thông tin về yêu cầu đó trong thẻ Tóm tắt. Trong ví dụ trước, thẻ Tóm tắt hiển thị thông tin về yêu cầu màu xanh lục được chọn.

Hình vuông màu xanh dương đậm hơn ở trên cùng bên trái của yêu cầu có nghĩa là yêu cầu đó có mức độ ưu tiên cao hơn. Hình vuông có màu xanh dương nhạt có nghĩa là mức độ ưu tiên thấp hơn. Trong ví dụ trước, yêu cầu đã chọn có mức độ ưu tiên cao và yêu cầu màu xanh dương ở trên có mức độ ưu tiên cao nhất.

Mục Tóm tắt bao gồm các trường Mức độ ưu tiên ban đầu và các trường 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.

Trong ví dụ trước, yêu cầu cho www.google.com được biểu thị bằng một đường kẻ ở bên trái, một thanh ở giữa có phần tối và phần sáng, và một đường ở bên phải. Ảnh chụp màn hình tiếp theo cho thấy kết quả biểu thị tương ứng của cùng một yêu cầu trong thẻ Timing của bảng điều khiển Network (Mạng). Dưới đây là cách hai biểu đồ này ánh xạ với nhau:

• Dòng bên trái là toàn bộ thông tin cho tất cả nhóm sự kiện Connection Start. Nói cách khác, tất cả mọi thứ trước Request Sent đều chỉ dành riêng cho bạn.
• Phần sáng của thanh là Request Sent và Waiting (TTFB).
• Phần tối của thanh là Content Download.
• Dòng bên phải về cơ bản là thời gian chờ luồng chính. Thông tin này không được thể hiện trong thẻ Timing (Thời gian).

Ví dụ này cho thấy cách biểu diễn một thanh dòng của yêu cầu www.google.com.

Ví dụ này cho thấy thẻ Timing (Thời gian) của yêu cầu www.google.com.

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ó tên là HEAP. Biểu đồ HEAP cung cấp thông tin tương tự như dòng Heap 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 của một số 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 phần đó mất bao lâu.

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 ghi lại. 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 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ế độ xoay để di chuyển dọc theo trục X và Y.
• Nhấp vào Scroll Mode (Chế độ xoay) để xoay theo trục Z.
• Nhấp vào biểu tượng Reset Transform để đặ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 phác thảo các phần tử có khả năng có vấn đề bằng màu xanh két.

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