web-dev-qa-db-ja.com

AngularJSアプリのダイジェストサイクルのパフォーマンスを測定するにはどうすればよいですか？

Anglejsダイジェストサイクルの持続時間を測定する簡単な方法は何ですか？ダイジェストサイクルのパフォーマンスを分析するためのさまざまな方法がありますが、それぞれ独自のピットファルがあります。

  • Chrome Profiler：詳細が多すぎるため、ダイジェストサイクルが簡単に見つけられない
  • Batarang（AngularJSブラウザープラグイン）：オーバーヘッドが大きすぎ、リフレッシュレートが遅く、大きなアプリで爆発します。

...より良い方法があるはず！？1？

performanceangularjs
81
Gil Birman

ここに秘密があります。 chrome devツールで、CPUプロファイルの実行を行います。キャプチャを停止した後、画面の下部にある「Heavy（Bottom Up）」の横に下向きの三角形があります。三角形をクリックして、「フレームチャート」を選択します。フレームチャートモードになったら、ズームおよびパンして、ダイジェストサイクル、所要時間、および呼び出されている機能を確認できます。フレームチャートは、ページの読み込みの問題、ng-repeatのパフォーマンスの問題、ダイジェストサイクルの問題を追跡するのに非常に役立ちます！ Flame Chartの前にどのようにデバッグしてプロファイルを作成できたかは、本当にわかりません。以下に例を示します。

Flame Chart in Chrome dev tools

148
aet

次の答えは、$-digestループのidleパフォーマンス、つまり、ウォッチ式が変更されていない場合のダイジェストのパフォーマンスを示しています。これは、ビューが変化していない場合でもアプリケーションが遅いように見える場合に役立ちます。より複雑な状況については、aetの回答を参照してください。

コンソールに次を入力します。

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

結果は、ダイジェストサイクルの期間をミリ秒単位で提供します。数値が小さいほど優れています。

注意：

コメントに記載されているドミ：ng-appディレクティブを初期化に使用した場合、angular.element(document)はあまり得られません。その場合は、代わりにng-app要素を取得します。例えば。 angular.element('#ng-app')を実行することにより

また試すことができます：

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

ダイジェストプロファイリングに役立つ新しいツールを以下に示します。 Digest-HUD

enter image description here

21
VitalyB

angular-performance を使用することもできます

この拡張機能は、ウォッチャーの数、ダイジェストタイミング、ダイジェストレートのリアルタイム監視チャートを提供します。また、ダイジェストタイミング分布を取得して、より再帰的なパターンから非常に長いダイジェストタイミングを確認し、すべてのリアルタイムデータをイベントにリンクして、どのアクションがアプリケーションパフォーマンスを変更したかを判断できるようにします。最後に、サービスメソッドの時間を計測し、その実行をカウントして、アプリの実行時間により影響を与えるメソッドを決定できます。

Angular performance screenshot

Disclamer：私は拡張機能の作者です

14
Nicolas Joseph

ダイジェストサイクルを監視する便利なツールは、優れた ng-statsツール by @ kentcdodds で見つけることができます。そのような小さな視覚要素を作成し、ブックマークレットを介して実装することもできます。 jsfiddleのようなiFrame内でも使用できます。

good digest cycleenter image description here

ページのangularダイジェスト/ウォッチに関する統計を表示する小さなユーティリティ。このライブラリには現在、チャートを作成するための簡単なスクリプトがあります（以下を参照）。また、angularStatsというモジュールを作成します。このモジュールには、指定したページの特定の場所にangular統計を配置するために使用できるangular-statsというディレクティブがあります。

https://github.com/kentcdodds/ng-stats で見つかりました

5
G.Mart

X Profiler を使用できます

  • ユーザートランザクションビュー、つまりCLICKとそれによって引き起こされるすべてのアクティビティ（他のイベント、XHR、タイムアウト）がグループ化されます。
  • ユーザートランザクション全体および/またはその部分の時間測定（ユーザーが感じる）。
  • 非同期スタックトレースの組み合わせ。
  • Focused Profiler-問題のあるイベントのみをプロファイルします。
  • Angular 1.xの統合。

enter image description here

2
Konstantin Triger

厳格モードの場合、ダイジェストサイクルを1回実行し、f12コンソールでChromeで実行します

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

上記のツールは、すでにダイジェストループのパフォーマンスを測定するというアイデアを提供しました。ダイジェストサイクルのパフォーマンスを向上させるための最も重要なポイントは次のとおりです。

  • 密接にスクロールするイベントを監視して、非表示の要素をすべて非表示にし、
    ウォッチャーの数を大幅に減らします。

  • 他のすべてのイベントに対して、管理可能な$ digestサイクルを用意します。

0
shailendra pathak