Bao gồm độ phức tạp thời gian javascript

Hiệu suất thời gian chạy là cách trang của bạn hoạt động khi nó đang chạy, thay vì tải. Hướng dẫn này hướng dẫn bạn cách sử dụng bảng Hiệu suất Chrome DevTools để 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 học được 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, Hoạt ảnh và Không hoạt động trên trang của bạn

thận trọng

thận trọng. Hướng dẫn này dựa trên Chrome 59. Nếu bạn sử dụng phiên bản Chrome khác, giao diện người dùng và các tính năng của DevTools có thể khác. Kiểm tra chrome://help để xem bạn đang chạy phiên bản Chrome nào

Bắt đầu

Trong hướng dẫn này, bạn mở DevTools trên một trang đang hoạt động và sử dụng bảng Hiệu suất để tìm nút cổ chai hiệu suất trên trang

1. 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 mở rộng, những tiện ích mở rộng đó có thể tạo nhiễu trong các phép đo hiệu suất của bạn

2. Tải trang sau trong Cửa sổ ẩn danh của bạn. Đây là bản demo mà bạn sẽ xem hồ sơ. Trang hiển thị một loạt các ô vuông nhỏ màu xanh di chuyển lên xuống

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

3. Nhấn Command+Option+I (Mac) hoặc Control+Shift+I (Windows, Linux) để mở DevTools

   

   Hình 1. Bản demo ở bên trái và DevTools ở bên phải

   Ghi chú. Đối với các ảnh chụp màn hình còn lại, DevTools là để bạn có thể xem nội dung của nó rõ hơn

Mô phỏng CPU di động

Thiết bị di động có sức mạnh 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 cấu hình một trang, hãy sử dụng CPU Throttling để mô phỏng cách trang của bạn hoạt động trên thiết bị di động

1. Trong DevTools, nhấp vào tab Hiệu suất

2. Đảm bảo rằng hộp kiểm Ảnh chụp màn hình được bật

3. Nhấp vào Cài đặt chụp ảnh

   . DevTools tiết lộ các cài đặt liên quan đến cách nó nắm bắt các chỉ số hiệu suất.

4. Đối với CPU, chọn tốc độ chậm gấp 2 lần. DevTools điều chỉnh CPU của bạn để nó chậm hơn 2 lần so với bình thường

   Hình 2. Điều tiết CPU, được viền màu xanh lam

   Ghi chú. Khi kiểm tra các trang khác, nếu bạn muốn đảm bảo rằng chúng hoạt động tốt trên các thiết bị di động cấp thấp, hãy đặt Điều tiết CPU thành tốc độ chậm hơn 20 lần. Bản demo này không hoạt động tốt với tốc độ giảm tốc 20 lần, vì vậy nó chỉ sử dụng tốc độ giảm tốc 2 lần cho mục đích hướng dẫn

Thiết lập bản trình diễn

Thật khó để tạo bản demo hiệu suất thời gian chạy hoạt động nhất quán cho tất cả người đọc trang web này. Phần này cho phép bạn tùy chỉnh bản trình diễn để đả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à mô tả bạn thấy trong hướng dẫn này, bất kể thiết lập cụ thể của bạn là gì

1. Tiếp tục nhấp vào Thêm 10 cho đến khi các ô vuông màu xanh 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ần nhấp

2. Nhấp vào Tối ưu hóa. Các ô vuông màu xanh sẽ di chuyển nhanh hơn và trơn tru hơn

   Ghi chú. Nếu bạn không thấy sự khác biệt rõ rệt giữa phiên bản được tối ưu hóa và không được tối ưu hóa, hãy thử nhấp vào Trừ 10 một vài lần và thử lại. Nếu bạn thêm quá nhiều ô vuông màu xanh, bạn sẽ sử dụng tối đa CPU và bạn sẽ không thấy sự khác biệt lớn trong kết quả của hai phiên bản

3. Nhấp vào Bỏ tối ưu hóa. Các ô vuông màu xanh 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 hóa của trang, các ô vuông màu xanh sẽ di chuyển nhanh hơn. Tại sao vậy? . Ghi lại trong bảng Hiệu suất để tìm hiểu cách phát hiện tắc nghẽn hiệu suất trong phiên bản chưa được tối ưu hóa

1. Trong DevTools, nhấp vào Ghi

   . DevTools nắm bắt các chỉ số hiệu suất khi trang chạy.

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

2. Đợi vài giây

3. Nhấp vào Dừng. DevTools dừng ghi, xử lý dữ liệu, sau đó hiển thị kết quả trên bảng Hiệu suất

   hinh 4. Kết quả hồ sơ

Wow, đó là một lượng dữ liệu quá lớn. Đừng lo lắng, tất cả sẽ có ý nghĩa hơn trong thời gian ngắn

Phân tích kết quả

Khi bạn đã ghi lại hiệu suất của trang, bạn có thể đo lường hiệu suất của trang kém đến mức nào và tìm (các) nguyên nhân

Phân tích khung hình mỗi giây

Số liệu chính để đo hiệu suất của bất kỳ hoạt ảnh nào là khung hình trên giây (FPS). Người dùng hài lòng khi hoạt ảnh chạy ở 60 FPS

1. Nhìn vào biểu đồ FPS. Bất cứ khi nào bạn nhì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 thấp đến mức có thể gây hại cho trải nghiệm người dùng. Nói chung, thanh màu xanh lá cây càng cao thì FPS càng cao

   Hình 5. Biểu đồ FPS, được viền màu xanh lam

2. Bên dưới biểu đồ FPS, bạn thấy biểu đồ CPU. Màu trong biểu đồ CPU tương ứng với màu trong tab Tóm tắt, ở cuối bảng Hiệu suất. Thực tế là biểu đồ CPU đầy màu sắc có nghĩa là CPU đã đượ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 cho thấy bạn nên tìm cách để thực hiện ít công việc hơn

   Hình 6. Biểu đồ CPU và tab Tóm tắt, được viền màu xanh lam

3. Di chuột qua biểu đồ FPS, CPU hoặc NET. DevTools 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. Điều này được gọi là chà và nó hữu ích để phân tích thủ công tiến trình của hoạt ảnh

   Hình 7. Xem ảnh chụp màn hình của trang xung quanh mốc 2000 mili giây của bản ghi

4. Trong phần Frames, di chuột qua một trong các ô vuông màu xanh lá cây. DevTools hiển thị cho bạn 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

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

Tất nhiên, với bản demo này, rõ ràng là trang hoạt động không tốt. Nhưng trong các tình huống thực tế, nó 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 để thực hiện các phép đo sẽ rất hữu ích

Thưởng. Mở máy đo FPS

Một công cụ hữu ích khác là máy đo FPS, cung cấp các ước tính thời gian thực cho FPS khi trang chạy

1. Nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux) để mở Menu Lệnh

2. Bắt đầu nhập Rendering trong Menu Lệnh và chọn Hiển thị Kết xuất

3. Trong tab Rendering, kích hoạt FPS Meter. Lớp phủ mới xuất hiện ở phía trên bên phải chế độ xem của bạn

   Hình 9. Máy đo FPS

4. Vô hiệu hóa FPS Meter và nhấn Escape để đóng tab Rendering. Bạn sẽ không sử dụng nó trong hướng dẫn này

Tìm nút cổ chai

Bây giờ bạn đã đo lường và xác minh rằng hoạt ảnh 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 ý tab tóm tắt. Khi không có sự kiện nào được chọn, tab này sẽ hiển thị cho bạn bảng phân tích về hoạt động. Trang đã dành phần lớn thời gian để hiển thị. 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 10. Tab Tóm tắt, được viền màu xanh lam

2. Mở rộng phần Chính. DevTools hiển thị cho bạn biểu đồ 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 đó diễn ra lâu hơn. Trục y biểu thị ngăn xếp cuộc 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 phía trên gây ra các sự kiện phía dưới

   Hình 11. Phần chính, được viền màu xanh lam

3. Có rất nhiều dữ liệu trong bản ghi. Phóng to một sự kiện Kích hoạt khung hình động duy nhất bằng cách nhấp, giữ và kéo chuột qua Tổng quan, đây là phần bao gồm các biểu đồ FPS, CPU và NET. Phần Chính và tab 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 một sự kiện Kích hoạt khung hình động duy nhất

   Ghi chú. Một cách khác để thu phóng là tập trung vào phần Chính bằng cách bấm vào nền của nó hoặc chọn một sự kiện, sau đó nhấn các phím W, A, S và D

4. Lưu ý hình tam giác màu đỏ ở trên cùng bên phải của sự kiện Kích hoạt khung hoạt hình. Bất cứ khi nào bạn nhìn thấy hình tam giác màu đỏ, đó là cảnh báo rằng có thể có sự cố liên quan đến sự kiện này

   Ghi chú. Sự kiện Kích hoạt khung hoạt hình xảy ra bất cứ khi nào một cuộc gọi lại requestAnimationFrame() được thực thi

5. Nhấp vào sự kiện Kích hoạt khung hình động. Tab Tóm tắt hiện hiển thị cho bạn thông tin về sự kiện đó. Lưu ý liên kết tiết lộ. Việc nhấp vào đó khiến DevTools đánh dấu sự kiện bắt đầu sự kiện Kích hoạt khung hoạt hình. Cũng lưu ý ứng dụng. js. 94 liên kết. Nhấp vào đó sẽ đưa bạn đến dòng có liên quan trong mã nguồn

   Hình 13. Thông tin thêm về sự kiện Kích hoạt khung hình động

   Ghi chú. Sau khi chọn một sự kiện, hãy sử dụng các phím mũi tên để chọn các sự kiện bên cạnh sự kiện đó

6. dưới ứng dụng. cập nhật sự kiện, có một loạt các sự kiện màu tím. Nếu chúng rộng hơn, có vẻ như mỗi cái có thể có một hình tam giác màu đỏ trên đó. Nhấp vào một trong các sự kiện Bố cục màu tím ngay bây giờ. DevTools cung cấp thêm thông tin về sự kiện trong tab Tóm tắt. Thật vậy, có một cảnh báo về việc chỉnh lại dòng bắt buộc (một từ khác cho bố cục)

7. Trong tab Tóm tắt, nhấp vào ứng dụng. js. 70 liên kết dưới Bố cục bắt buộc. DevTools đư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

   Ghi chú. Vấn đề với mã này là, trong mỗi khung hoạt hình, nó thay đổi kiểu cho từng ô vuông, sau đó truy vấn vị trí của từng ô vuông trên trang. Do phong cách đã thay đổi nên trình duyệt không biết liệu vị trí của từng ô vuông có thay đổi hay không, do đó, nó phải sắp xếp lại ô vuông để tính toán vị trí của nó. Xem để tìm hiểu thêm

Phù. Đó là rất nhiều thứ để tiếp thu, nhưng giờ đây bạn đã có một 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 thời gian chạy. Làm tốt lắm

Thưởng. Phân tích phiên bản được tối ưu hóa

Sử dụng quy trình công việc và công cụ mà bạn vừa học, nhấp vào Tối ưu hóa trên bản trình diễn để bật mã được tối ưu hóa, 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 các sự kiện trong biểu đồ 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 hóa của ứng dụng hoạt động ít hơn nhiều, dẫn đến hiệu suất tốt hơn

Ghi chú. Ngay cả phiên bản "được tối ưu hóa" này cũng không tuyệt lắm, bởi vì nó vẫn thao túng thuộc tính top của mỗi ô vuông. Một cách tiếp cận tốt hơn là bám vào các thuộc tính chỉ ảnh hưởng đến việc tổng hợp. Xem để biết thêm thông tin

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 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 của bạn. Xem Đo lường hiệu suất với Mô hình RAIL để tìm hiểu thêm

Để cảm thấy thoải mái hơn với bảng Hiệu suất, hãy luyện tập để trở nên 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ả của mình, hãy mở câu hỏi Stack Overflow được gắn thẻ google-chrome-devtools. Bao gồm ảnh chụp màn hình hoặc liên kết đến các trang có thể sao chép, 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à Tổng quan về hiệu suất kết xuất. Anatomy Of A Frame đi sâu vào chi tiết hơn nữa

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 cổ chai hoạt hình cụ thể để cung cấp cho bạn một chuyến tham quan tập trung thông qua bảng Hiệu suất, nhưng đó chỉ là một trong nhiều nút cổ chai mà bạn có thể gặp phải. Phần còn lại của loạt bài Hiệu suất kết xuất có rất nhiều mẹo hay để cải thiện các khía cạnh khác nhau của hiệu suất thời gian chạy, chẳng hạn như