パフォーマンス チューニングのための 7 つのヒント AngularJS_AngularJS

AnglarJS は優れた Web フレームワークとして、フロントエンド開発の負担を大幅に簡素化できます。最近、Sebastian Fröstl はブログ投稿「長いリストの AngularJS パフォーマンス チューニング」で、複雑なデータ構造を含む大きなリストを処理する場合、AngularJS の実行が非常に遅いと述べました。彼は記事の中で解決策も共有しました。以下は記事の翻訳です。

AnglarJS は優れていますが、複雑なデータ構造を含む大きなリストを扱う場合、実行が非常に遅くなります。これは、コア管理ページを AngularJS に移行するときに発生した問題です。これらのページは 500 行のデータを表示するときにスムーズに動作するはずですが、最初の方法ではレンダリングに 7 秒という驚くべき時間がかかりました。

その後、実装プロセス中に 2 つの主なパフォーマンスの問題があることがわかりました。 1 つは「ng-repeat」ディレクティブに関連し、もう 1 つはフィルターに関連します。

以下では、さまざまな方法でパフォーマンスの問題を解決した経験を共有し、皆様にインスピレーションをお届けできることを願っています。

1. 大きなリストを処理すると、AngularJS の ng-repeat が遅くなるのはなぜですか?

AngularJS の ng-repeat は、2500 を超える双方向データ バインディングを処理すると速度が低下します。これは、AngularJS が「ダーティ チェック」機能を通じて変更を検出するためです。各チェックには時間がかかるため、複雑なデータ構造を含む大きなリストはアプリケーションの速度を低下させます。

2. パフォーマンスを向上させるための前提条件

時間記録コマンド

リストのレンダリングにかかる​​時間を測定するために、「ng-repeat」の属性「$last」を使用して時間を記録する簡単なプログラムを作成しました。時間は TimeTracker サービスに保存されるため、時間の記録はサーバー側でのデータのロードから分離されます。

// レンダリング時間を記録するためのポストリピートディレクティブ angular.module('siApp.services').directive('postRepeatDirective', ['$timeout', '$log', 'TimeTracker', function($timeout, $log, TimeTracker) { return function(scope, element, attrs) { if (scope.$last){ $timeout(function(){ var timeFinishedLoadingList = TimeTracker.reviewListLoaded(); var ref = new Date(timeFinishedLoadingList); var end = new Date(); $log.debug("## DOM レンダリング リストを取りました: " + (end - ref) + " ms") } } ]); // HTML で使用します。

Chrome デベロッパー ツールのタイムライン プロパティ

Chrome デベロッパー ツールの [タイムライン] タブでは、イベント、ブラウザーの 1 秒あたりのフレーム数、メモリ割り当てを確認できます。 「メモリ」ツールは、メモリ リークとページに必要なメモリを検出するために使用されます。ページのちらつきの問題は、フレーム レートが 30 フレーム/秒未満の場合に発生します。 「フレーム」ツールは、レンダリング パフォーマンスを理解するのに役立ち、JavaScript タスクによって費やされた CPU 時間を表示することもできます。

3. リストのサイズを制限することによる基本的なチューニング

この問題を軽減する最善の方法は、表示されるリストのサイズを制限することです。これは、ページネーションと無限スクロール バーの追加によって実現できます。

ページネーション

ページネーションには、AngularJS の「limitTo」フィルター (AngularJS バージョン 1.1.4 以降) と「startFrom」フィルターを使用できます。表示リストのサイズを制限することで、レンダリング時間を短縮できます。これは、レンダリング時間を短縮する最も効率的な方法です。

// コントローラー内のページネーション $scope.currentPage = 0; $scope.numberOfPages = function() { return Math.ceil($scope.displayedItemsList.length/ $scope.pageSize); ; // フィルターから開始 angular.module('app').filter('startFrom', function() { return function(input, start) { return input.slice(start); }; // HTML で使用 //ページネーション ボタン{{$index + 1}}

ページングを使用できない、または使用したくないが、フィルタリング プロセスが非常に遅い場合は、必ず最初の 5 つの手順を確認し、「ng-show」を使用して冗長なリスト要素を非表示にしてください。

無限スクロールバー

この方法について詳しく知りたい場合は、http://binarymuse.github.io/ngInfiniteScroll/

にアクセスしてください。

4. 7 つのチューニングルール

1. データバインディングなしでリストをレンダリングします

データ バインディングがパフォーマンスの問題の原因となる可能性が最も高いため、これは最も明白な解決策です。リストを 1 回だけ表示し、データを更新または変更する必要がない場合は、データ バインディングを放棄するのが優れた解決策です。残念ながら、あなたは自分のデータをコントロールできなくなりますが、私たちにはこの法律を利用する以外に選択肢はありません。詳細については、https://github.com/Pasvaz/bindonceをご覧ください。

2. データの計算にインライン メソッドを使用しないでください

コントローラーでリストを直接フィルターするには、フィルター リンクを取得するメソッドを使用しないでください。 「ng-repeat」は、すべての [$digest(http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$digest)%5D 式を評価します。この例では、「filteredItems()」はフィルターされたリンクを返します。評価プロセスが遅いと、アプリケーション全体の速度が急速に低下します。

//頻繁に評価する必要があるため、これは良い方法ではありません。

//これは使用されるメソッドです

3. 2 つのリストを使用します (1 つはビュー表示用、もう 1 つはデータ ソースとして)

表示するリストをデータ全体のリストから分離することは、非常に便利なモデルです。一部のフィルターを前処理して、キャッシュに保存されているリンクをビューに適用できます。次のケースは、基本的な実装プロセスを示しています。 filteredLists 変数はキャッシュ内のリンクを保持し、applyFilter メソッドはマッピングを処理します。

/* コントローラー */ // 基本リスト var items = [{name:"John", active:true}, {name:"Adam"}, {name:"Chris"}, {name:"Heather" }]; // selectedList を初期化 $scope.displayedItems = items; // フィルター キャッシュ var filteredLists['active'] = $filter('filter)(items, {"active" : true}); scope.applyFilter = function(type) { if (filteredLists.hasOwnProperty(type){ // フィルターがキャッシュされているかどうかを確認します $scope.displayedItems = filteredLists[type]; } else { /* キャッシュされていないフィルター処理 */ } } // リセットfilter $scope.resetFilter = function() { $scope.displayedItems = items } /* 表示 */アクティブを選択

{{item.name}}

4. 他のテンプレートでは ng-show の代わりに ng-if を使用します

クリックしてリスト項目の詳細情報を表示するなど、追加情報を表示するために命令またはテンプレートを使用する場合は、必ず ng-if (AngularJSv. 1.1.5 以降) を使用してください。 ng-if はレンダリングを防止します (ng-show と比較して)。したがって、必要に応じて他の DOM およびデータ バインディングを評価できます。

上記のコンテンツでは、AngularJS のパフォーマンス チューニングに関する 7 つの提案について詳しく説明しています。気に入っていただければ幸いです。