Hiệu suất 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ẽ 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:
- Mở Google Chrome ở Chế độ ẩn danh. Chế độ ẩn danh đảm bảo rằng 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.
Tải trang sau 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/
Nhấn tổ hợp phím Command+Option+I (Mac) hoặc Control+Shift+I (Windows, Linux) để mở DevTools.
Mô phỏng CPU 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 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.
- Trong DevTools, hãy nhấp vào thẻ Hiệu suất.
- Đảm bảo bạn đã bật hộp đánh dấu Ảnh chụp màn hình.
- Nhấp vào Capture Settings (Cài đặt chụp) (cài đặt). DevTools cho thấy các chế độ cài đặt liên quan đến cách thu thập chỉ số hiệu suất.
Đố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.
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 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ể chế độ thiết lập cụ thể của bạn.
- 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áy cao cấp, có thể mất khoảng 20 lượt nhấp.
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.
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á.
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.Đợi một vài giây.
Nhấp vào Dừ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.
Ồ, đó là một lượng dữ liệu khổng lồ. Đừng lo, bạn sẽ sớm hiểu rõ 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 sẽ hài lòng khi ảnh động chạy ở tốc độ 60 khung hình/giây.
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 mức thấp đến mức có thể gây hại cho trải nghiệm người dùng.
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.
Di chuột qua biểu đồ FPS, CPU hoặc NET. Công cụ cho nhà phát triển sẽ 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.
Trong mục 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.
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.
- Nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux) để mở Trình đơn lệnh.
- Bắt đầu nhập
Rendering
trong Trình đơn lệnh rồi chọn Hiện kết xuất. 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.
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
Giờ đây, bạn đã đo lường và xác minh rằng ảnh động không hoạt động tốt, câu hỏi tiếp theo cần trả lời là: tại sao?
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.
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 thể hiện 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 đó mất nhiều thời gian 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 được xếp chồng lên nhau, tức là các sự kiện ở trên đã gây ra các sự kiện ở dưới.
Có rất nhiều dữ liệu trong bản ghi. Hãy phóng to một sự kiện Animation Frame Fired (Khung ảnh động đã kích hoạt) bằng cách nhấp, giữ và kéo chuột qua phần Overview (Tổng quan). Đây là phần bao gồm các biểu đồ FPS, CPU và NET. Phần Chính và thẻ Tóm tắt chỉ hiển thị thông tin cho phần bản ghi đã chọn.
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.
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 liên quan trong mã nguồn.
Trong sự kiện app.update, có một loạt sự kiện màu tím. Nếu các đường này rộng hơn, thì có vẻ như mỗi đường có thể có một hình tam giác màu đỏ. Bây giờ, hãy nhấp vào một trong các sự kiện Bố cục màu tím. DevTools cung cấp thêm thông tin về sự kiện trong thẻ Summary (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).
Trong thẻ Summary (Tóm tắt), hãy nhấp vào đường liên kết bên cạnh app.update @ trong mục Animation Frame Requested (Yêu cầu khung ảnh động). Công cụ cho nhà phát triển sẽ đưa bạn đến dòng mã đã buộc bố cụ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 thưởng: Phân tích phiên bản được 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ố lượng sự kiện trong biểu đồ hình ngọn lửa của phần Main (Chính), bạn có thể thấy rằng phiên bản được tối ưu hoá của ứng dụng làm việc ít hơn nhiều, dẫn đến hiệu suất tốt hơn.
Các bước tiếp theo
Mô hình RAIL là nền tảng để hiểu rõ hiệu suất. Mô hình này sẽ 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. 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 phải 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 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. Cấu trúc của khung sẽ đi sâu hơn vào chi tiết.
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ư:
- Tối ưu hoá quá trình thực thi JS
- Giảm phạm vi và độ phức tạp của các phép tính kiểu
- Tránh bố cục lớn, phức tạp và tình trạng bố cục bị xáo trộn
- Đơn giản hoá độ phức tạp của quá trình vẽ và giảm vùng vẽ
- Chỉ sử dụng các thuộc tính dành cho trình kết hợp và quản lý số lượng lớp
- Loại bỏ độ trễ cho trình xử lý đầu vào