AngularJS
パフォーマンスプロファイリング
サーチ…
プロファイリングに関するすべて
プロファイリングとは何ですか？
定義により、 プロファイリングは、例えば、プログラムの空間（メモリ）または時間の複雑さ、特定の命令の使用法、または関数呼び出しの頻度および持続時間を測定する動的プログラム分析の一形態である。
それはなぜ必要なのですか？
プロファイリングは重要です。これは、自分のプログラムが時間の大部分を費やしていることを知るまで効果的に最適化することができないからです。プログラムの実行時間（プロファイリング）を測定することなく、実際に改善したかどうかはわかりません。
ツールとテクニック：
Chromeの内蔵開発ツール
これには、プロファイリングに使用する包括的なツールが含まれています.JavaScriptファイル、CSSファイル、アニメーション、CPU消費、メモリリーク、ネットワーク、セキュリティなどのボトルネックを深く見つけることができます。
タイムライン記録を作成し、疑わしく長いスクリプトの評価イベントを探します。いずれかが見つかった場合は、 JSプロファイラを有効にして録音をやり直して、どのJS関数が呼び出されたか、それぞれの所要時間についての詳細情報を得ることができます。 続きを読む...
- FireBug （Firefoxで使用）
- Dynatrace （IEで使用）
Batarang （Chromeで使用）
それは安定しているが、角型アプリケーションのモデル、パフォーマンス、依存性を監視するために使用することができるが、クロムブラウザ用の古いアドオンです。小規模なアプリケーションでうまく動作し、スコープ変数がさまざまなレベルで何を保持しているかの洞察を得ることができます。それは、アクティブウォッチャー、表現を見たり、アプリでコレクションを見ることができます。
ウォッチャー （Chromeで使用）
角度のあるアプリでウォッチャーの数を数える、きれいでシンプルなUI。
- 次のコードを使用して、角度付きアプリのウォッチャーの数を手動で確認します（ @Words Like Jared Number of watchers ）
(function() {
var root = angular.element(document.getElementsByTagName('body')),
watchers = [],
f = function(element) {
angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
watchers.push(watcher);
});
}
});
angular.forEach(element.children(), function(childElement) {
f(angular.element(childElement));
});
};
f(root);
// Remove duplicate watchers
var watchersWithoutDuplicates = [];
angular.forEach(watchers, function(item) {
if(watchersWithoutDuplicates.indexOf(item) < 0) {
watchersWithoutDuplicates.push(item);
}
});
console.log(watchersWithoutDuplicates.length);
})();
さまざまな機能を利用してアプリケーションのプロファイルを作成するオンラインツールやウェブサイトがいくつかあります。
そのようなサイトの1つがhttps://www.webpagetest.org/です。
これにより、実際のブラウザ（IEとChrome）と実際のコンシューマ接続速度を使用して、世界中の複数の場所から無料のウェブサイト速度テストを実行できます。シンプルなテストを実行したり、マルチステップトランザクション、ビデオキャプチャ、コンテンツブロッキングなどの高度なテストを実行することができます。
次のステップ：
プロファイリングを完了しました。それは道のりの半分をもたらすだけです。次の作業は、結果を実際にアクション項目に変えてアプリケーションを最適化することです。簡単なテクニックで角度アプリのパフォーマンスを向上させる方法については、このドキュメントを参照してください 。
ハッピーコーディング:)