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

Question 1

anglejsダイジェストサイクルの期間を測定する簡単な方法は何ですか？ダイジェストサイクルのパフォーマンスを分析するにはさまざまな方法がありますが、それぞれに独自の落とし穴があります。

Chromeプロファイラー：詳細が多すぎて、ダイジェストサイクルを見つけやすい方法で分解しません
Batarang（AngularJSブラウザープラグイン）：オーバーヘッドが多すぎ、リフレッシュレートが遅く、大きなアプリで爆発します。

...もっと良い方法があるはずですか？！1？

Question 2

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

Chrome開発ツールのフレームチャート

Question 3

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

コンソールに次のように入力します。

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

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

注意：

コメントで指摘されたドミ： 初期化にディレクティブをangular.element(document)使用した場合、あまり成果はありませんng-app。その場合は、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); 
})

Question 4

これがダイジェストプロファイリングに役立つ新しいツールです：ダイジェスト-HUD

ここに画像の説明を入力してください

Question 5

角度パフォーマンスを使用することもできます

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

Angularパフォーマンスのスクリーンショット

免責事項：私は拡張機能の作成者です

Question 6

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

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

で発見https://github.com/kentcdodds/ng-stats

Question 7

UXプロファイラーを使用できます

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

Question 8

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

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

Question 9

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

スクロールイベントを注意深く監視して、すべての非表示要素を非表示にし
、ウォッチャーの数を大幅に減らします。
他のすべてのイベントに対して管理可能な$ digestサイクルを用意します。