Làm cách nào để đo lường Hiệu suất của Chu kỳ thông báo của ứng dụng AngularJS?

Cách đơn giản để đo khoảng thời gian của chu kỳ tiêu hóa anglejs là gì? Có nhiều phương pháp khác nhau để phân tích hiệu suất của chu trình tiêu hóa, tuy nhiên, mỗi phương pháp đều đi kèm với những lợi ích riêng của nó:

• Hồ sơ Chrome: Quá nhiều chi tiết, không chia nhỏ chu trình thông báo một cách dễ tìm
• Batarang (plugin trình duyệt AngularJS): Quá nhiều chi phí, tốc độ làm mới chậm, bùng nổ với các ứng dụng lớn.

... phải có một cách tốt hơn?! 1?

Đây là một bí mật. Trong các công cụ dành cho nhà phát triển chrome, hãy chạy cấu hình cpu. Sau khi bạn ngừng chụp, ở dưới cùng của màn hình là một hình tam giác xuống bên cạnh "Nặng (Bottom Up)". Nhấp vào hình tam giác và chọn "Biểu đồ ngọn lửa". Khi bạn đang ở chế độ Biểu đồ ngọn lửa, bạn có thể thu phóng và xoay để xem các chu kỳ thông báo, thời gian diễn ra và chính xác các chức năng đang được gọi. Biểu đồ ngọn lửa cực kỳ hữu ích để theo dõi các vấn đề về tải trang, các vấn đề về hiệu suất ng-lặp lại, các vấn đề về chu trình thông báo! Tôi thực sự không biết làm thế nào tôi có thể gỡ lỗi và lập hồ sơ trước Biểu đồ ngọn lửa. Đây là một ví dụ:

Câu trả lời sau sẽ cho bạn biết hiệu suất nhàn rỗi của vòng lặp $ thông báo, tức là, hiệu suất của thông báo khi không có biểu thức đồng hồ nào của bạn thay đổi. Điều này rất hữu ích nếu ứng dụng của bạn có vẻ chậm chạp ngay cả khi chế độ xem không thay đổi. Đối với các tình huống phức tạp hơn, hãy xem câu trả lời của aet.

Nhập nội dung sau vào bảng điều khiển:

angular.element(document).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Kết quả sẽ cung cấp cho bạn khoảng thời gian của chu kỳ thông báo, tính bằng mili giây. Số càng nhỏ càng tốt.

GHI CHÚ:

Domi lưu ý trong các nhận xét: angular.element(document) sẽ không mang lại nhiều lợi ích nếu bạn sử dụng ng-appchỉ thị để khởi tạo. Trong trường hợp đó, hãy lấy ng-appphần tử thay thế. Vd: bằng cách làmangular.element('#ng-app')

Bạn cũng có thể thử:

angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Đây là một công cụ mới mà tôi tìm thấy giúp ích trong việc lập hồ sơ thông báo: Digest-HUD

Bạn cũng có thể sử dụng hiệu suất góc

Tiện ích mở rộng này cung cấp các biểu đồ theo dõi thời gian thực về số lượng người theo dõi, thời gian thông báo và tỷ lệ thông báo. Bạn cũng nhận được phân phối thời gian thông báo để bạn có thể tạo ra thời gian thông báo đặc biệt dài từ nhiều paterns đệ quy hơn và tất cả dữ liệu thời gian thực được liên kết với các sự kiện để bạn có thể xác định hành động nào đã thay đổi hiệu suất ứng dụng. Cuối cùng, bạn có thể tính thời gian của phương thức dịch vụ và đếm thời gian thực thi của chúng để xác định phương thức có tác động nhiều hơn đến thời gian chạy ứng dụng của bạn.

Disclamer: Tôi là tác giả của phần mở rộng

Bạn có thể tìm thấy một công cụ hữu ích để theo dõi chu trình thông báo thông qua công cụ ng-stats tuyệt vời của @kentcdodds . Nó tạo ra một yếu tố hình ảnh nhỏ như vậy, và thậm chí có thể được thực hiện thông qua bookmarklet. Nó thậm chí có thể được sử dụng bên trong iFrames như jsfiddle.

Tiện ích nhỏ để hiển thị số liệu thống kê về thông báo / đồng hồ góc cạnh trên trang của bạn. Thư viện này hiện có một tập lệnh đơn giản để tạo biểu đồ (xem bên dưới). Nó cũng tạo ra một mô-đun được gọi là angularStatscó một chỉ thị được gọi là chỉ thị angular-stats có thể được sử dụng để đặt các số liệu thống kê về góc vào một vị trí cụ thể trên trang mà bạn chỉ định.

Tìm thấy tại https://github.com/kentcdodds/ng-stats

Bạn có thể sử dụng UX Profiler

• Chế độ xem Giao dịch người dùng, tức là NHẤP VÀ tất cả hoạt động do nó gây ra (các sự kiện khác, XHR, Hết giờ) được nhóm lại với nhau.
• Các phép đo thời gian (theo cảm nhận của Người dùng) của toàn bộ Giao dịch người dùng và / hoặc các phần của nó.
• Dấu vết ngăn xếp không đồng bộ kết hợp.
• Hồ sơ tiêu điểm - hồ sơ chỉ sự kiện có vấn đề.
• Tích hợp Angular 1.x.

đối với chế độ nghiêm ngặt, một lần chạy cucle thông báo, hãy chạy nó trong bảng điều khiển f12 trong chrome

angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])

các công cụ ở trên mô tả đã cung cấp cho bạn ý tưởng về việc đo lường hiệu suất của vòng lặp thông báo Các điểm quan trọng nhất để tăng hiệu suất của chu kỳ thông báo là

• Giám sát chặt chẽ các sự kiện cuộn để ẩn tất cả các yếu tố vô hình và
  giảm đáng kể số lượng người theo dõi.

• Có chu kỳ thông báo $ có thể quản lý cho tất cả các sự kiện khác.