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 là tài liệu tham khảo toàn diện về các tính năng 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ài viết Bắt đầu phân tích hiệu suất thời gian chạy để tham khảo 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 trong thời gian chạy

Ghi lại hiệu suất trong 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, ngược lại với việc 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 lượt 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, chứ không phải khi đang 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 Start profiling and loading page (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 sẽ chuyển đến 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 và tự động dừng 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 nơi 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 hiển thị hoạt động trong khi tải trang.

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

Bật hộp đánh dấu Ảnh chụp màn hình để chụp ảnh màn hình của mọi khung hình trong khi ghi.

Xem bài viết 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 đang ghi lại một trang, hãy nhấp vào Thu thập rác chổi dọn dẹp để buộc thu gom rác.

Hiển thị tùy chọn cài đặt ghi

Nhấp vào biểu tượng Ghi lại chế độ cài đặt để 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 âm 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 âm. Cách tắt các ngăn xếp lệnh gọi này:

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

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 các mẫu JavaScript. Đối tượng 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ả các ngăn xếp lệnh gọi JavaScript.

Ví dụ này cho thấy một bản ghi có các mẫu JS bị vô hiệu hoá.

Ví dụ này cho thấy một bản ghi với các mẫu JS được 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 chụp . Xem Hiện chế độ ghi lại.
2. Đặt Network (Mạng) ở cấp đ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 chụp . Xem Hiện chế độ ghi lại.
2. Đặt CPU ở mức điều tiết đã chọn.

Sự điều tiết tuỳ thuộc vào khả năng của máy tính. Ví dụ: tuỳ chọn giảm tốc độ 2 lần khiến CPU hoạt động chậm hơn gấp 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 vì cấu trúc của thiết bị di động rất khác với cấu trúc của máy tính và máy tính xách tay.

Bật khả năng đo lường sơn nâng cao

Cách xem khả năng đo lường sơn chi tiết:

1. Mở trình đơn Cài đặt chụp . Xem Hiện chế độ ghi lại.
2. Chọn hộp kiểm Bật tính năng đo lường sơn nâng cao.

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

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

Để kiểm tra hiệu suất của ứng dụng với số lượng lõi xử lý khác nhau, 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 chụp . Xem Hiện chế độ ghi lại.
2. Đánh dấu vào mục Hardware đồng thời và đặt số lõi trong hộp đầu vào.

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 là 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 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 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.

Di chuyển trong bản ghi

Để kiểm tra kỹ lưỡng bản ghi hiệu suất, bạn có thể chọn một phần của bản ghi âm, cuộn biểu đồ ngọn lửa dài, phóng to và thu nhỏ, cũng như sử dụng breadcrumb (tập hợp liên kết phân cấp) để chuyển giữa các mức thu phóng.

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

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

Để chọn một phần của một bản ghi âm, hãy nhấp và giữ rồi kéo sang trái hoặc sang 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 gần đây.
2. Dùng phím W, A, S, D để phóng to, di chuyển sang trái, thu nhỏ và di chuyển sang phải tương ứng.

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ỳ tuyến đường nào (Chính và các tuyến đường lân cận).
2. 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 bằng 2 ngón tay.

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

Phần Tổng quan về dòng thời gian cho phép bạn tạo nhiều breadcrumb (tập hợp liên kết phân cấp) lồng nhau liên tiếp, tăng mức thu phóng rồi chuyển đến cấp đã chọn.

Cách tạo và sử dụng breadcrumb:

1. Trong trang Tổng quan về dòng thời gian, hãy chọn một phần của bản ghi.
2. Di chuột qua phần đã chọn rồi nhấp vào nút zoom_in N mili giây. Lựa chọn sẽ mở rộng để điền vào phần Tổng quan về Dòng thời gian. Một chuỗi breadcrumb bắt đầu hiển thị ở đầu trang Tổng quan về tiến trình.
3. Lặp lại 2 bước trước đó để tạo một breadcrumb (tập hợp liên kết phân cấp khác) 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 breadcrumb (tập hợp liên kết phân cấp) tương ứng trong chuỗi ở đầu trang Tổng quan về dòng thời gian.

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

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

Hoạt động tìm kiếm

Để mở một hộp tìm kiếm ở cuối bảng điều khiển 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 giúp tìm bất kỳ hoạt động nào bắt đầu bằng E.

Cách di chuyển giữa các hoạt động phù hợp với truy vấn 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 lựa chọn trước hoặc Enter để chọn lựa chọn tiếp theo.

Bảng điều khiển Hiệu suất hiển thị chú giải công cụ trên hoạt động được 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 Khớp chữ hoa chữ thường để phân biệt chữ hoa chữ thường của cụm từ tìm kiếm.
• 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.

Hãy 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 sẽ giới thiệu sự kiện được chọn bằng màu xanh dương.

Ví dụ này cung cấp 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 điều khiển Performance (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ị quá trình 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 tạo 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 bản nhạc Main. Sự kiện click đã gây ra một lệnh gọi hàm ẩn danh. Hàm này lần lượt có tên là onEndpointClick_, với tên là handleClick_, v.v.

Bảng điều khiển Performance (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 hiển thị. Những sự kiện màu vàng và tím đậm hơn nhất quán trên tất cả bản ghi.

Các thao tác dài cũng được đánh dấu bằng hình tam giác màu đỏ và 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 vừa qua được tô bóng màu đỏ, trong khi 50 mili giây ban đầu thì không.

Ngoài ra, kênh Main (Chính) còn hiển thị thông tin về các hồ sơ CPU đã bắt đầu và dừng bằng các hàm profile() và profileEnd() trong bảng điều khiển.

Để ẩn biểu đồ 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 mẫu JS bị tắt, bạn 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ị mũi tên kết nối các trình khởi tạo sau với các sự kiện mà chúng gây 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ờ -> Bộ tính giờ đã kích hoạt
• Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay WebSocket hoặc Huỷ bỏ WebSocket

Để xem mũi tên, hãy tìm một trong những trình khởi tạo trong biểu đồ hình ngọn lửa và nhấp vào mũi tên đó.

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ị sẽ mang đến cho bạn một góc nhìn khác nhau về các hoạt động:

• Khi bạn muốn xem các hoạt động gốc gây ra nhiều công việc nhất, hãy sử dụng thẻ Cây cuộc gọi.
• Khi bạn muốn xem các hoạt động chiếm nhiều thời gian nhất, hãy sử dụng thẻ Dưới cùng.
• 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 nhanh hơn, cả 3 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 cả từ.

Mỗi chế độ xem dạng bảng trong bảng điều khiển Performance (Hiệu suất) hiển thị đườ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 các 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 đường liên kết để mở tệp nguồn trong bảng điều khiển Nguồn.

Lưu ý: Ba phần tiếp theo đề 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ẻ Dưới cùng 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. Sau đó, Event đó có thể khiến một trình xử lý thực thi.

Trong biểu đồ 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 các thẻ Cây cuộc gọi 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 cuộc gọi để biết ví dụ về các hoạt động gốc.

Thẻ Cây cuộc gọi

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

Thẻ Cây cuộc gọi 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 ví dụ này, các mục cấp cao nhất trong cột Hoạt động, chẳng hạn như Event, Paint và Composite Layers là các hoạt động gốc. Việ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ự thực hiện thể hiện thời gian trực tiếp dành cho hoạt động đó. Tổng thời gian thể hiện thời gian dành cho hoạt động đó hoặc 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 sự kiện theo tên hoạt động.

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

Nhấp vào biểu tượng Show Heaviest Stack (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 Activity (Hoạt động). Nhấp vào một hoạt động để điền vào bảng Ngăn xếp nặng nhất. Bảng Ngăn xếp nặng nhất cho bạn thấy phần tử 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 những hoạt động trực tiếp chiếm nhiều thời gian nhất ở dạng tổng hợp.

Thẻ 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 đồ ngọn lửa theo dõi Chính của ví dụ này, bạn có thể thấy rằng hầu như toàn bộ thời gian đều được dành để 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 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 đó, trên tất cả cá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 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 khi ghi lại.

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) thể hiện thời điểm bắt đầu hoạt động đó, so với thời điểm bắt đầu quay. Thời gian bắt đầu của 1573.0 ms cho mục được chọn trong ví dụ này có nghĩa là hoạt động đã bắt đầu 1573 mili giây sau khi quá trình ghi bắt đầu.

Cột Thời gian tự thực hiện 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 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 ít hơn 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 Painter (Vẽ) để lọc ra tất cả hoạt động trong các danh mục đó.

Xem dấu thời gian

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

• Hiển thị đầu tiên (FP)
• Hiển thị nội dung đầu tiên (FCP)
• Thời gian hiển thị nội dung lớn nhất (LCP)
• Sự kiện DOMContentLoaded (DCL)
• Sự kiện Onload (L)
• Lệnh gọi performance.mark() tuỳ chỉnh của bạn. Một dấu riêng lẻ có chú giải công cụ hiển thị bên dưới tại 813,44 mili giây, có nhãn Bắt đầu chạy JavaScript.
• Lệnh gọi performance.measure() tuỳ chỉnh của bạn. Khoảng màu vàng như sau, đượ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 qua điểm đánh dấu trên theo dõi Thời gian.

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

Xem hoạt động tương tác của người dùng trên trang Lượt tương tác để theo dõi các vấn đề tiềm ẩn về tốc độ 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 điều khiển Hiệu suất rồi bắt đầu ghi lại.
3. Nhấp vào một phần tử (cà phê) rồi dừng ghi âm.
4. Tìm kênh Tương tác trong dòng thời gian.

Trong ví dụ này, kênh Interactions (Tương tác) cho thấy hoạt động tương tác với Pointer (Con trỏ). Các tương tác có râu cho biết độ trễ nhập và trình bày tại ranh giới thời gian xử lý. Di chuột qua hoạt động tương tác để xem chú giải công cụ với độ trễ khi nhập, thời gian xử lý và độ trễ trình bày.

Kênh 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) cho những lượt tương tác dài hơn 200 mili giây trong thẻ Tóm tắt và trong chú giải công cụ khi di chuột:

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

Xem hoạt động của GPU trong phần GPU.

Xem hoạt động của đường quét

Xem hoạt động của đường quét trong mục Đường quét.

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 đồng hồ FPS để ước tính FPS theo thời gian thực khi trang chạy. Xem phần Xem khung hình/giây theo thời gian thực bằng máy đo FPS.

Phần 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 chú giải công cụ cung cấp thêm thông tin về khung đó.

Ví dụ này cho thấy một chú giải công cụ khi bạn di chuột qua một khung.

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

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

Ví dụ này cho thấy một chú giải công cụ khi bạn di chuột qua một khung hiển thị 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ẽ khung đã chọn bằng màu xanh dương.

Xem yêu cầu mạng

Mở rộng phần Network (Mạng) để xem thác nước của các yêu cầu mạng đã diễn 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 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 đang hiển thị thông tin về yêu cầu màu xanh lụ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à đó là yêu cầu có mức độ ưu tiên cao hơn. Hình vuông màu xanh dương nhạt hơn có nghĩa là có mức độ ưu tiên thấp hơn. Trong ví dụ trước, yêu cầu được chọn có mức độ ưu tiên cao và yêu cầu màu xanh dương phía trên yêu cầu đó 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à 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 phần Tối ưu hóa việc tải tài nguyên bằng API ưu tiên tìm nạp.

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

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

Ví dụ này cho thấy cách thể hiện dạng thanh dòng của yêu cầu www.google.com.

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

Xem chỉ số về bộ nhớ

Bật hộp đánh dấu Memory (Bộ nhớ) để xem các chỉ số về bộ nhớ từ lầ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 giống như dòng JS Heap trong biểu đồ Memory (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 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 đượ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 1000 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ư Network (Mạng) hoặc Main (Chính), đôi khi bạn cần ướ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ữ, sau đó kéo sang trái hoặc sang phải để chọn một phần của bản ghi. Ở cuối phần lựa chọn, Công cụ cho nhà phát triển cho thấy thời lượng phần đó.

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

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

Xem phần Chụp ảnh màn hình trong khi ghi để 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 hình đó. 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 trong phần Khung. Công cụ cho nhà phát triển hiển thị 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 mục Frames (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.

Thông tin về các lớp thành phần hiển thị

Để xem thông tin lớp nâng cao về một khung:

1. Bật tính năng đo lường sơn nâng cao.
2. Chọn một khung trong mục Frames (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 biểu đồ.

Ví dụ này cho thấy lớp #39 được làm nổi bật 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à Y.
• Nhấp vào biểu tượng Rotate Mode (Chế độ xoay) để xoay dọc theo trục Z.
• Nhấp vào biểu tượng Đặt lại biến đổi để đặt lại sơ đồ về vị trí ban đầu.

Xem cách phân tích lớp trong thực tế:

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

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

1. Bật tính năng đo lường sơn 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 thông qua 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 số khung hình/giây theo thời gian thực bằng máy đo FPS

Số liệu thống kê kết xuất khung là lớp phủ xuất hiện ở góc trên cùng bên phải của khung nhìn. Công cụ này cung cấp số liệu ước tính về FPS theo thời gian thực khi trang chạy.

Xem nội dung Số liệu thống kê về kết xuất khung hình.

Xem các sự kiện vẽ theo thời gian thực bằng tính năng Sơn 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 các lớp bằng Đường viền lớp

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

Xem nội dung Đường viền lớp.

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

Sử dụng mục Vấn đề về hiệu suất khi 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ó thể có vấn đề bằng màu xanh mòng két.

Xem Vấn đề về hiệu suất khi cuộn.