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

Tiếng Kayce Basques
Tiếng Basques Kayce
Twitter GitHub Lỗi

Hiệu suất trong thời gian chạy là hiệu suất của trang khi đang chạy chứ không phải khi đang tải. Hướng dẫn này sẽ chỉ cho bạn cách sử dụng bảng điều khiển Hiệu suất 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. Đối với mô hình RAIL, những kỹ năng bạn tìm hiểu trong hướng dẫn này sẽ rất hữu ích khi phân tích các giai đoạn Phản hồi, Ảnh động và Trạng thái rảnh của trang.

Bắt đầu

Trong hướng dẫn này, bạn mở Công cụ cho nhà phát triển trên một trang đang hoạt động rồi sử dụng bảng điều khiển Hiệu suất để tìm nút thắt cổ chai hiệu suất trên trang.

  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, các tiện ích đó có thể gây nhiễu khi đo lường hiệu suất.

  2. Tải trang sau trong cửa sổ ẩn danh. Đây là bản minh hoạ mà bạn sẽ lập hồ sơ. 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ở Công cụ cho nhà phát triển.

    Bản minh hoạ ở bên trái và Công cụ cho nhà phát triển ở bên phải

    Hình 1 Bản minh hoạ ở bên trái và Công cụ cho nhà phát triển ở bên phải

Mô phỏng CPU của thiết bị di động

Thiết bị di động có công suất CPU ít 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 lập hồ sơ một trang, hãy sử dụng tính năng Điều tiết CPU để mô phỏng hiệu suất của trang trên thiết bị di động.

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

  4. Đối với CPU (CPU), hãy chọn Giảm tốc độ 2 lần. Công cụ cho nhà phát triển sẽ điều tiết CPU của bạn để chậm hơn 2 lần so với bình thường.

    Chế độ điều tiết CPU

    Hình 2. Chế độ điều tiết CPU, có đường viền màu xanh dương

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

Thật khó để tạo một bản minh hoạ về hiệu suất trong thời gian chạy hoạt động nhất quán đối với mọi độ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 trải nghiệm 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ể bạn thiết lập cụ thể như thế nào.

  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 đây. Trên một máy cao cấp, quá trình này có thể mất 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 hơn 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à nhiều lần giật hơn nữa.

Ghi lại hiệu suất trong 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 phải di chuyển từng hình vuông có cùng lượng không gian trong cùng một khoảng thời gian. Ghi lại 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 không được tối ưu hoá.

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

    Lập hồ sơ trang

    Hình 3: Lập hồ sơ trang

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

  3. Nhấp vào Ngừng. Công cụ cho nhà phát triển sẽ dừng ghi, xử lý dữ liệu rồi hiển thị kết quả trên bảng điều khiển Hiệu suất.

    Kết quả của hồ sơ

    Hình 4: Kết quả của hồ sơ

Ồ, số lượng dữ liệu quá lớn. Đừng lo, mọi thứ sẽ sớm có ý nghĩa hơn.

Phân tích kết quả

Sau khi có được bản ghi hiệu suất của trang, bạn có thể đo lường hiệu suất của trang và tìm ra(các) nguyên nhân.

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

Chỉ số chính để đo lường hiệu suất của mọi ảnh động là số khung hình trên 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, thì điều đó có nghĩa là tốc độ khung hình đã giảm xuống thấp đến mức có thể gây ảnh hưởng xấu đến trải nghiệm người dùng. Nhìn chung, thanh màu xanh lục càng cao thì FPS càng cao.

    Biểu đồ FPS

    Hình 5: Biểu đồ FPS có đường viền màu xanh dương

  2. Bên dưới biểu đồ FPS, bạn sẽ thấy biểu đồ CPU. Các màu trong biểu đồ CPU (CPU) tương ứng với các màu trong thẻ Summary (Tóm tắt) ở cuối bảng điều khiển Performance (Hiệu suất). Trên thực tế, biểu đồ CPU có nhiều màu có nghĩa là CPU đã đạt mức sử dụng tối đa 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à dấu hiệu để bạn tìm cách giảm bớt công việc.

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

    Hình 6: Biểu đồ CPU và thẻ Tóm tắt, được vẽ bằng màu xanh dương

  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. Phương pháp này được gọi là thao tác tua nhanh (scation) và rất hữu ích khi bạn 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

    Hình 7: Xem ảnh chụp màn hình của trang ở khoảng thời gian 2000 mili giây của bản ghi

  4. Trong mục Khung, hãy di chuột qua một trong các hình vuông màu xanh lục. Công cụ cho bạn thấy khung hình trên giây của khung hình cụ thể đó. Mỗi khung hình có thể thấp hơn mục tiêu 60 khung hình/giây.

    Di chuột qua một khung

    Hình 8: Di chuột qua một khung

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

Phần bổ sung: Mở đồng hồ đo khung hình/giây (FPS)

Một công cụ tiện dụng khác là đồng hồ đo FPS. Bộ đo này cung cấp số liệu ước tính cho FPS theo thời gian thực khi trang chạy.

  1. Nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux) để mở Trình đơn Command.
  2. Bắt đầu nhập Rendering vào trình đơn Command rồi chọn Show Rendering (Hiện kết xuất).

  3. Trong thẻ Hiển thị, hãy bật Máy đo khung hình/giây. 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ồ đo khung hình/giây

    Hình 9: Đồng hồ đo FPS

  4. Tắt Máy đo khung hình/giây rồi nhấn phím Escape để đóng thẻ Hiển thị. Bạn sẽ không sử dụng tính năng đó trong hướng dẫn này.

Tìm nút thắt cổ chai

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

  1. Ghi lại thẻ tóm tắt. Khi bạn chưa chọn sự kiện nào, thẻ này sẽ hiển thị 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 công việc hơn, nên mục tiêu của bạn là giảm lượng thời gian dành cho công việc kết xuất hình ảnh.

    Thẻ Tóm tắt

    Hình 10: Thẻ Tóm tắt, có đường viền màu xanh dương

  2. Mở rộng phần Main (Chính). Công cụ cho nhà phát triển hiển thị cho bạn biểu đồ hình ngọn lửa về 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 đại diện cho một sự kiện. Thanh càng rộng thì sự kiện đó càng mất nhiều thời gian. Trục y biểu thị ngăn xếp lệnh gọi. Khi bạn thấy các sự kiện được xếp chồng lên nhau, thì điều đó có nghĩa là các sự kiện phía trên đã gây ra các sự kiện thấp hơn.

    Phần chính

    Hình 11: Mục chính có đường viền màu xanh dương

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

    Đã phóng to một sự kiện được kích hoạt bằng khung ảnh động

    Hình 12: Phóng to một sự kiện được kích hoạt bằng Khung ảnh động

  4. Lưu ý hình tam giác màu đỏ ở trên cùng bên phải của sự kiện Animation Frame Fired (Khung ảnh động được kích hoạt). Bất cứ khi nào bạn thấy một hình 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.

  5. Nhấp vào sự kiện Animation Frame Fired (Khung ảnh động được kích hoạt). Giờ đây, thẻ Summary (Tóm tắt) sẽ hiển thị cho bạn thông tin về sự kiện đó. Ghi lại đường liên kết hiển thị. Thao tác nhấp vào khiến Công cụ cho nhà phát triển làm nổi bật sự kiện đã khởi tạo sự kiện Kích hoạt khung ảnh động. Ngoài ra, hãy lưu ý đến đường liên kết app.js:94. Thao tác nhấp vào biểu tượng đó sẽ đưa bạn đến dòng liên quan trong mã nguồn.

    Thông tin khác về sự kiện Animation Frame được kích hoạt

    Hình 13: Thông tin khác về sự kiện Animation Frame Fired (Kích hoạt khung ảnh động)

  6. Trong sự kiện app.update, có một loạt các sự kiện màu tím. Nếu rộng hơn, thì có vẻ như mỗi đường viền có một hình tam giác màu đỏ trên đó. Nhấp vào một trong các sự kiện Layout 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. Trên thực tế, đã có cảnh báo về việc bắt buộc chỉnh lại luồng (một từ khác cho bố cục).

  7. Trong thẻ Summary (Tóm tắt), hãy nhấp vào đường liên kết app.js:70 trong phần Layout Forced (Bố cục bắt buộc). Công cụ cho nhà phát triển đưa bạn đến dòng mã buộc thiết lập bố cục.

    Dòng mã tạo ra bố cục bắt buộc

    Hình 13: Dòng mã đã tạo ra bố cục bắt buộc

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

Bật mí thêm cho bạn: Phân tích phiên bản được tối ưu hoá

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

Các bước tiếp theo

Nền tảng để hiểu rõ hiệu suất là mô hình RAIL. Mô hình này hướng dẫn bạn về các chỉ số hiệu suất quan trọng nhất đối với người dùng. Xem bài viết Đo lường hiệu suất bằng mô hình RAIL để tìm hiểu thêm.

Để làm quen với bảng điều khiển Hiệu suất, hãy thực hành một cách hoàn hảo. Hãy thử lập hồ sơ các trang của riêng bạn và phân tích kết quả. Nếu bạn có bất kỳ câu hỏi nào về kết quả, hãy mở câu hỏi Trên ngăn xếp được gắn thẻ google-chrome-devtools. Nếu có thể, hãy cung cấp ảnh chụp màn hình hoặc đường liên kết đến các trang có thể mô phỏng.

Để 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 chuyển HTML, CSS và JS thành pixel trên màn hình. Tốt nhất là bạn nên bắt đầu từ bài viết Tổng quan về hiệu suất hiển thị. Cấu trúc của khung sẽ đi sâu hơn nữa.

Cuối cùng, có nhiều cách để cải thiện hiệu suất trong thời gian chạy. Hướng dẫn này tập trung vào một nút thắt cổ chai cụ thể của ảnh động để cung cấp cho bạn chuyến tham quan tập trung thông qua bảng điều khiển Hiệu suất, nhưng đó 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 trong loạt bài viết về Hiệu suất hiển thị có nhiều mẹo hay để cải thiện các khía cạnh khác nhau của hiệu suất trong thời gian chạy, chẳng hạn như: