Hiệu suất trong 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 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 thời gian chạy. Về mô hình RAIL, các kỹ năng bạn tìm hiểu trong hướng dẫn này rất hữu ích để phân tích các giai đoạn Phản hồi, Ảnh động và Trạng thái rảnh trên 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 và 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 trang.
- 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 trong hoạt động đo lường hiệu suất.
Tải trang sau đây trong cửa sổ Ẩn danh của bạn. Đâ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ở Công cụ cho nhà phát triển.
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 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 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.
- Trong Công cụ cho nhà phát triển, 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 biểu tượng Capture Settings (Ghi chế độ 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 công cụ này ghi lại chỉ số hiệu suất. Đối với CPU, hãy chọn Giảm tốc độ 2x. Công cụ cho nhà phát triển điều tiết CPU của bạn để tốc độ chậm hơn gấp 2 lần so với bình thường.
Hình 2. Chế độ điều tiết CPU, được vẽ đường viền màu xanh dương
Thiết lập bản minh hoạ
Rấ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 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ể bạn thiết lập cụ thể như thế nào.
- 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 hơn và trơn tru 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à có nhiều hiện tượng giật hơn.
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ẽ nhanh hơn. Tại sao lại như vậy? Cả hai phiên bản đều phải di chuyển từng hình vuông có 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 biểu tượng Ghi lại
. Công cụ cho nhà phát triển ghi lại các chỉ số hiệu suất khi trang chạy.
Hình 3: Phân tích trang
Đợi một vài giây.
Nhấp vào Ngừng. Công cụ cho nhà phát triển sẽ dừng ghi, xử lý dữ liệu, sau đó hiển thị kết quả trên Bảng điều khiển hiệu suất.
Hình 4: Kết quả của hồ sơ
Ôi, quá nhiều dữ liệu. Đừng lo, mọi thứ sẽ sớm có ý nghĩa hơn.
Phân tích kết quả
Sau khi đã có bản ghi về hiệu suất của trang, bạn có thể đo lường hiệu suất của trang kém như thế nào 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.
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 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.
Hình 5: Biểu đồ FPS (khung hình/giây) được vẽ đường viền màu xanh dương
Bên dưới biểu đồ FPS bạn sẽ thấy biểu đồ CPU. Các màu trong biểu đồ 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ó đầy đủ màu có nghĩa là CPU đã đạt đến mức 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à tín hiệu để tìm cách giảm bớt công việc.
Hình 6: Biểu đồ CPU và thẻ Tóm tắt được vẽ đường viền màu xanh dương
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 gọi là tua 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.
Hình 7: Xem ảnh chụp màn hình của trang vào khoảng thời gian 2000 mili giây của bản ghi
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 nhà phát triển cho bạn thấy FPS cho khung cụ thể đó. Mỗi khung hình có thể thấp hơn nhiều so với mục tiêu 60 khung hình/giây.
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 khá rõ ràng là trang đang hoạt động không tốt. Tuy nhiên, trong các trường hợp thực tế, thông tin có thể không rõ ràng như vậy, vì vậy, việc có tất cả các công cụ này để giúp các phép đo trở nên hữu ích.
Thông tin thêm: Mở đồng hồ đo FPS
Một công cụ tiện lợi khác là máy đo FPS, công cụ này cung cấp các số liệu ước tính về FPS theo thời gian thực khi trang chạy.
- Nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux) để mở Trình đơn Command.
- Bắt đầu nhập
Renderingvào trình đơn Command rồi chọn Show Rendering (Hiện kết xuất). Trong thẻ Kết xuất, 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.
Hình 9: Chỉ số FPS
Tắt FPS Meter (Đo lường khung hình/giây) rồi nhấn Escape để đóng thẻ Rendering (Kết xuất). Bạn sẽ không sử dụng nó 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 hoạt động không hiệu quả, câu hỏi tiếp theo cần trả lời là: tại sao?
Lưu ý thẻ tóm tắt. Khi không có sự kiện nào được chọn, thẻ này sẽ hiển thị cho bạn 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 thực hiện ít công việc hơ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 10: Thẻ Tóm tắt được vẽ đường viền màu xanh dương
Mở rộng mục Main. 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 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, điều đó có nghĩa là các sự kiện phía trên dẫn đến các sự kiện thấp hơn.
Hình 11: Mục chính được vẽ đường viền màu xanh dương
Có rất nhiều dữ liệu trong bản ghi. Phóng to một sự kiện Animation Frame Fired (Kích hoạt khung ảnh động) bằng cách nhấp, giữ và kéo chuột qua Overview (Tổng quan), đây là phần bao gồm các biểu đồ FPS, CPU và NET (Tổng quan). Mục Main và thẻ Summary (Tóm tắt) chỉ hiển thị thông tin cho phần đã chọn của bản ghi.
Hình 12: Phóng to trong một sự kiện được kích hoạt Khung ảnh động
Lưu ý hình tam giác màu đỏ ở trên cùng bên phải của sự kiện Animation Frame đã kích hoạt. Bất cứ khi nào bạn nhìn thấy một hình tam giác màu đỏ, đó là một cảnh báo cho biết có thể có vấn đề liên quan đến sự kiện này.
Nhấp vào sự kiện Animation Frame đã 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 đó. Ghi lại đường liên kết để lộ. Việ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 Animation Frame đã kích hoạt. Ngoài ra, hãy lưu ý đến đường liên kết app.js:94. Thao tác nhấp vào nút đó sẽ đưa bạn đến dòng liên quan trong mã nguồn.
Hình 13: Thông tin thêm về sự kiện Đã kích hoạt khung ảnh động
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, có vẻ như mỗi tệp đều có một hình tam giác màu đỏ. Nhấp vào một trong các sự kiện Bố cục màu tím ngay bây giờ. 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ó một cảnh báo về các luồng chỉnh lại bắt buộc (một từ khác chỉ bố cục).
Trong thẻ Summary (Tóm tắt), hãy nhấp vào đường liên kết app.js:70 trong mục Layout Forced (Buộc bố cục). Công cụ cho nhà phát triển đưa bạn đến dòng mã buộc bố cục.
Hình 13: Dòng mã gây 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 công 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 làm việc và công cụ bạn vừa học, 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 đồ 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 hoạt động í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 nền tảng để giúp bạn hiểu rõ về hiệu suất. Mô hình này hướng dẫn bạn 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ử phân tích các 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ở câu hỏi về StackOverflow đượ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ể tái tạo.
Để 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 các pixel trên màn hình. Cách tốt nhất để bắt đầu là Tổng quan về hiệu suất hiển thị. Cấu trúc của một khung hình đ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 để giúp bạ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 video về Hiệu suất hiển thị có nhiều mẹo hay giúp cải thiện nhiều khía cạnh của hiệu suất trong thời gian chạy, chẳng hạn như:
- Tối ưu hoá việc thực thi JS
- Giảm phạm vi và độ phức tạp của việc tính toán kiểu
- Tránh việc có các bố cục lớn, phức tạp và tình trạng rắc rối về bố cục
- Đơn giản hoá độ phức tạp của quá trình sơn và giảm khu vực sơn
- Bám sát các thuộc tính chỉ dành cho trình kết hợp và quản lý số lượng lớp
- Gỡ lỗi cho trình xử lý nhập