Phân tích hiệu suất trong thời gian chạy

Kayce Basques

Hiệu suất thời gian chạy là hiệu suất của trang khi đang chạy (thay vì đang tải). Hướng dẫn này sẽ hướng dẫn bạn cách sử dụng bảng điều khiển Hiệu suất trong Công cụ của Chrome cho nhà phát triển để phân tích hiệu suất trong thời gian chạy. Về mô hình RAIL, các kỹ năng bạn học được trong hướng dẫn này sẽ hữu ích cho việc phân tích các giai đoạn Phản hồi, Ảnh động và Rảnh của trang.

Bắt đầu

Trong hướng dẫn này, chúng ta sẽ sử dụng bảng điều khiển Hiệu suất để tìm nút thắt cổ chai về hiệu suất trên một trang đang hoạt động. Cách bắt đầu:

  1. Mở Google Chrome ở Chế độ ẩn danh. Chế độ ẩn danh đảm bảo Chrome chạy ở trạng thái sạch. Ví dụ: nếu bạn đã cài đặt nhiều tiện ích, thì các tiện ích đó có thể tạo ra nhiễu trong quá trình đo lường hiệu suất.

  2. Tải trang sau đây trong cửa sổ ẩn danh. Đây là bản minh hoạ mà bạn sẽ phân tích. Trang này hiển thị một loạt các hình vuông nhỏ màu xanh dương di chuyển lên và xuống.

    https://googlechrome.github.io/devtools-samples/jank/

  3. Nhấn tổ hợp phím Command+Option+I (Mac) hoặc Control+Shift+I (Windows, Linux) để mở DevTools.

    Bản minh hoạ ở bên trái và DevTools ở bên phải.

Mô phỏng CPU trên thiết bị di động

Thiết bị di động có công suất CPU thấp hơn nhiều so với máy tính để bàn và máy tính xách tay. Bất cứ khi nào bạn phân tích tài nguyên cho một trang, hãy sử dụng chế độ Điều tiết CPU để mô phỏng hiệu suất của trang trên thiết bị di động.

  1. Trong DevTools, hãy nhấp vào thẻ Hiệu suất.
  2. Đảm bảo rằng bạn đã bật hộp đánh dấu Ảnh chụp màn hình .
  3. Nhấp vào Capture Settings (Cài đặt chụp) (cài đặt). Công cụ cho nhà phát triển tiết lộ các chế độ cài đặt liên quan đến cách ghi lại chỉ số hiệu suất.

  4. Đối với CPU, hãy chọn Hệ số giảm tốc CPU gấp 4 lần. DevTools điều tiết CPU để CPU chạy chậm hơn 4 lần so với bình thường.

    Chế độ điều tiết CPU được đặt ở mức giảm tốc 4 lần.

Thiết lập bản minh hoạ

Rất khó để tạo một bản minh hoạ hiệu suất thời gian chạy hoạt động nhất quán cho tất cả độc giả của trang web này. Phần này cho phép bạn tuỳ chỉnh bản minh hoạ để đảm bảo rằng trải nghiệm của bạn tương đối nhất quán với ảnh chụp màn hình và nội dung mô tả mà bạn thấy trong hướng dẫn này, bất kể cách thiết lập cụ thể của bạn.

  1. Tiếp tục nhấp vào Thêm 10 cho đến khi các hình vuông màu xanh dương di chuyển chậm hơn đáng kể so với trước. Trên một máy cao cấp, có thể cần khoảng 20 lượt nhấp.

  2. Nhấp vào Tối ưu hoá. Các hình vuông màu xanh dương sẽ di chuyển nhanh và mượt mà hơn.

  3. Nhấp vào Huỷ tối ưu hoá. Các hình vuông màu xanh dương di chuyển chậm hơn và bị giật nhiều hơn.

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

Khi bạn chạy phiên bản được tối ưu hoá của trang, các hình vuông màu xanh dương sẽ di chuyển nhanh hơn. Tại sao lại như vậy? Cả hai phiên bản đều phải di chuyển mỗi hình vuông cùng một khoảng không gian trong cùng một khoảng thời gian. Ghi lại trong bảng điều khiển Hiệu suất để tìm hiểu cách phát hiện nút thắt cổ chai về hiệu suất trong phiên bản chưa được tối ưu hoá.

  1. Trong Công cụ cho nhà phát triển, hãy nhấp vào Record (Ghi) . Công cụ cho nhà phát triển sẽ ghi lại các chỉ số hiệu suất khi trang chạy.

    Lập hồ sơ trang minh hoạ.

  2. Đợi một vài giây.

  3. Nhấp vào Ngừng. DevTools sẽ dừng ghi, xử lý dữ liệu, sau đó hiển thị kết quả trong bảng điều khiển Hiệu suất.

    Trang báo cáo phân tích tài nguyên.

Ồ, đó là một lượng dữ liệu khổng lồ. Đừng lo, bạn sẽ sớm thấy hiệu quả hơn.

Phân tích kết quả

Sau khi có bản ghi hiệu suất, bạn có thể phân tích mức độ kém hiệu quả của trang và tìm ra(các) nguyên nhân.

Phân tích số khung hình/giây

Chỉ số chính để đo lường hiệu suất của mọi ảnh động là khung hình/giây (FPS). Người dùng hài lòng khi ảnh động chạy ở tốc độ 60 khung hình/giây.

  1. Xem biểu đồ FPS. Bất cứ khi nào bạn thấy một thanh màu đỏ phía trên FPS, điều đó có nghĩa là tốc độ khung hình đã giảm xuống quá thấp và có thể gây ảnh hưởng đến trải nghiệm người dùng.

    Biểu đồ FPS được làm nổi bật.

  2. Bên dưới biểu đồ FPS, bạn sẽ thấy biểu đồ CPU. Màu sắc trong biểu đồ CPU tương ứng với màu sắc trong thẻ Tóm tắt ở cuối bảng điều khiển Hiệu suất. Việc biểu đồ CPU có đầy màu sắc có nghĩa là CPU đã hoạt động hết công suất trong quá trình ghi. Bất cứ khi nào bạn thấy CPU hoạt động hết công suất trong thời gian dài, đó là tín hiệu để tìm cách giảm tải công việc.

    Biểu đồ CPU và thẻ Tóm tắt.

  3. Di chuột qua biểu đồ FPS, CPU hoặc NET. Công cụ cho nhà phát triển hiển thị ảnh chụp màn hình của trang tại thời điểm đó. Di chuyển chuột sang trái và phải để phát lại bản ghi. Thao tác này được gọi là quét và rất hữu ích khi phân tích tiến trình của ảnh động theo cách thủ công.

    Xem ảnh chụp màn hình trong bản ghi hiệu suất.

  4. Trong phần Khung, hãy di chuột qua một trong các hình vuông màu xanh lục. DevTools cho bạn thấy FPS cho khung hình cụ thể đó. Mỗi khung hình có thể thấp hơn nhiều so với mục tiêu 60 FPS.

    Di chuột qua một khung.

Tất nhiên, với bản minh hoạ này, rõ ràng là trang đang hoạt động không hiệu quả. Tuy nhiên, trong các trường hợp thực tế, điều này có thể không rõ ràng lắm. Vì vậy, việc có tất cả các công cụ này để đo lường sẽ rất hữu ích.

Phần thưởng: Mở đồng hồ đo FPS

Một công cụ hữu ích khác là công cụ đo FPS. Công cụ này cung cấp thông tin ước tính theo thời gian thực về FPS khi trang chạy.

  1. Nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux) để mở Trình đơn lệnh.
  2. Bắt đầu nhập Rendering trong Trình đơn lệnh rồi chọn Hiện kết xuất.

  3. Trong bảng điều khiển Rendering (Kết xuất), hãy bật tuỳ chọn Show Rendering stats (Hiện số liệu thống kê về kết xuất). Một lớp phủ mới sẽ xuất hiện ở trên cùng bên phải của khung nhìn.

    Đồng hồ FPS.

  4. Tắt FPS Meter (Bộ đếm FPS) rồi nhấn Escape để đóng bảng Rendering (Hiển thị). Bạn sẽ không sử dụng lớp này trong hướng dẫn này.

Tìm điểm tắc nghẽn

Bây giờ, bạn đã đo lường và xác minh rằng ảnh động đang không hoạt động tốt, câu hỏi tiếp theo cần trả lời là: tại sao?

  1. Lưu ý thẻ Tóm tắt. Khi bạn không chọn sự kiện nào, thẻ này sẽ cho bạn thấy bảng chi tiết về hoạt động. Trang dành phần lớn thời gian để kết xuất. Vì hiệu suất là nghệ thuật làm ít việc hơn, nên mục tiêu của bạn là giảm thời gian kết xuất.

    Thẻ Tóm tắt, được vẽ đường viền màu xanh dương.

  2. Mở rộng mục Chính. DevTools hiển thị cho bạn biểu đồ hình ngọn lửa của hoạt động trên luồng chính theo thời gian. Trục x biểu thị bản ghi theo thời gian. Mỗi thanh thể hiện một sự kiện. Thanh rộng hơn có nghĩa là sự kiện diễn ra lâu hơn. Trục y biểu thị ngăn xếp lệnh gọi. Khi bạn thấy các sự kiện xếp chồng lên nhau, điều đó có nghĩa là các sự kiện trên gây ra các sự kiện thấp hơn.

    Mục Chính.

  3. Có rất nhiều dữ liệu trong bản ghi. Phóng to một sự kiện Ảnh động đã kích hoạt bằng cách nhấp, giữ và kéo chuột qua mục Overview (Tổng quan), tức là phần bao gồm các biểu đồ FPS, CPU và NET. Phần Main và thẻ summary chỉ hiển thị thông tin cho phần đã chọn của bản ghi.

    Phóng to một sự kiện Đã kích hoạt khung ảnh động.

  4. Lưu ý tam giác màu đỏ ở trên cùng bên phải của Task (Nhiệm vụ) và các sự kiện bố cục. Bất cứ khi nào bạn thấy một tam giác màu đỏ, đó là cảnh báo cho biết có thể có vấn đề liên quan đến sự kiện này. Hình tam giác màu đỏ trên một Việc cần làm có nghĩa là đó là một việc cần làm dài.

  5. Nhấp vào sự kiện Animation Frame Fired (Khung ảnh động đã kích hoạt). Giờ đây, thẻ Tóm tắt sẽ hiển thị cho bạn thông tin về sự kiện đó. Khi bạn nhấp vào đường liên kết bên cạnh Initiated by (Được bắt đầu bởi), DevTools sẽ làm nổi bật sự kiện đã kích hoạt sự kiện Animation Frame Fired (Khung ảnh động đã kích hoạt). Ngoài ra, hãy lưu ý đến đường liên kết app.update @. Khi nhấp vào đó, bạn sẽ chuyển đến dòng có liên quan trong mã nguồn.

    Thông tin khác về sự kiện Khung ảnh động đã kích hoạt.

  6. Trong sự kiện app.update, có một loạt sự kiện màu tím. Nếu kích thước đó rộng hơn, có vẻ như mỗi hình vuông có thể có một hình tam giác màu đỏ trên đó. Bây giờ, hãy nhấp vào một trong các sự kiện Bố cục màu tím. Công cụ cho nhà phát triển cung cấp thêm thông tin về sự kiện trong thẻ Tóm tắt. Thật vậy, có một cảnh báo về việc buộc luồng lại (một từ khác cho bố cục).

  7. Trong thẻ Tóm tắt, hãy nhấp vào đường liên kết bên cạnh app.update @ trong phần Vô hiệu hoá bố cục đầu tiên. Công cụ cho nhà phát triển sẽ đưa bạn đến dòng mã đã buộc bố cục.

    Dòng mã gây ra bố cục bắt buộc.

Chà! Có rất nhiều thông tin cần nắm bắt, nhưng giờ đây, bạn đã có nền tảng vững chắc về quy trình cơ bản để phân tích hiệu suất thời gian chạy. Bạn giỏi quá.

Phần bổ sung: Phân tích phiên bản tối ưu hoá

Sử dụng quy trình làm việc và công cụ mà bạn vừa tìm hiểu, hãy nhấp vào Optimize (Tối ưu hoá) trên bản minh hoạ để bật mã đã tối ưu hoá, ghi lại hiệu suất khác rồi phân tích kết quả. Từ tốc độ khung hình được cải thiện đến việc giảm số sự kiện trong biểu đồ hình ngọn lửa của mục Chính, bạn có thể thấy rằng phiên bản được tối ưu hoá của ứng dụng thực hiện ít hoạt động hơn nhiều, dẫn đến hiệu suất cao hơn.

Các bước tiếp theo

Nền tảng để hiểu hiệu suất là mô hình RAIL. Mô hình này cho bạn biết những chỉ số hiệu suất quan trọng nhất đối với người dùng. Hãy xem phần Đo lường hiệu suất bằng mô hình RAIL để tìm hiểu thêm.

Để sử dụng thành thạo bảng điều khiển Hiệu suất, bạn cần thực hành nhiều. Hãy thử phân tích trang của riêng bạn và phân tích kết quả. Nếu bạn có thắc mắc về kết quả, hãy mở một câu hỏi trên Stack Overflow được gắn thẻ google-chrome-devtools. Cung cấp ảnh chụp màn hình hoặc đường liên kết đến các trang có thể tái hiện (nếu có thể).

Để trở thành chuyên gia về hiệu suất trong thời gian chạy, bạn phải tìm hiểu cách trình duyệt dịch HTML, CSS và JS thành pixel trên màn hình. Nơi tốt nhất để bắt đầu là phần Tổng quan về hiệu suất kết xuất. The Anatomy Of A Frame (Cấu trúc của một khung hình) sẽ tìm hiểu chi tiết hơn.

Cuối cùng, có nhiều cách để cải thiện hiệu suất thời gian chạy. Hướng dẫn này tập trung vào một nút thắt cổ chai ảnh động cụ thể để cung cấp cho bạn một hướng dẫn tập trung thông qua bảng điều khiển Hiệu suất, nhưng đây chỉ là một trong nhiều nút thắt cổ chai mà bạn có thể gặp phải. Phần còn lại của loạt bài về Hiệu suất kết xuất có rất nhiều mẹo hay để cải thiện nhiều khía cạnh của hiệu suất thời gian chạy, chẳng hạn như: