Angular JSの重い動作を高速化させる12のヒントを解説！JAの構築管理プロセス簡素化ツールをより軽快に使用できる

この記事ではAngularJSの概要を紹介し、AngularJSのパフォーマンスを向上させるためのヒントを紹介します。

 

 

AngularJSとは？

AngularJSは、JavaScriptアプリケーションの構築と管理の複雑なプロセスを簡素化するために作成されました。AngularJSは、Model-View-ControllerまたはMVCプログラミング構造に基づいて、単一ページのWebアプリケーションを作成する場合に特に便利です。

AngularJSは、標準のJSとHTMLに基づくJavaScriptライブラリを使用することで、DOM操作やAJAXグルーなどを自動的に処理します。このツールは、開発者がミックス、マッチ、テストするためのJavaScriptのモジュラービルディングブロックを提供します。AngularJSは、単純なタグを持つHTMLページにすばやく追加できます。

 

 

AngularJSの最適化のヒント

AngularJSには多数のビルトイン最適化ツールがありますが、パフォーマンスに関する不満は未だにフレームワークを悩ませています。Googleが提供する大規模なインフラストラクチャがない場合は、AngularJSアプリケーションのパフォーマンスを向上させるためのベストプラクティスを実装する必要があります。

AngularJSアプリケーションを高速化するためのヒントを以下に示します。

 

1. 1.digestサイクルから目を離さずに

AngularJSアプリのdigestサイクルは、パフォーマンスの良い指標です。digestサイクルは、監視されている変数の変更をチェックするループだと考えてください。digestサイクルが短ければ短いほど、アプリケーションの実行速度は向上します。

 

2. 2.watchersを制限する

データバインディングを導入するたびに、より多くの$$watchersと$scopesが作成され、digestサイクルが長くなります。 $$watchersが多すぎると、ラグが発生することがありますので、可能な限り使用を制限してください。

1. 3.可能であれば、ワンタイムバインディングを使用する

旧バージョンのAngularJSを使用している場合、ワンタイムバインディングを利用することができます。これを行うには、値の前にダブルコロンを追加します。正しく適用されると、値は一度解決され、watchersリストから消えます。 AngularJS 1.3で導入されたワンタイムバインディング機能は、Angular 4.0では使用できないことに注意しましょう。

 

4. 4.scope.$evalAsyncを使用する

すでに実行中のdigestサイクルを手動でアクティブ化しようとすると、エラーが発生する可能性があります。これを防ぐには、digestサイクルを開始する必要があるときに$ applyの代わりにscope.$ evalAsyncを使用します。現在のサイクルの終了時に実行される操作を、新しいものを設定することなくキューに入れます。

 

5. 5.CPUプロファイラやタイムラインのようなChrome DevToolsを使用する

DevTools Profilerとタイムラインツールの両方は、最適化作業の指針となるパフォーマンスボトルネックを見つけるのに役立ちます。Chrome DevToolsの詳細なガイドをご覧ください。

 

6. 6.DOMアクセスを制限する

DOMへのアクセスにはコストがかかるので、DOMツリーを小さくしましょう。できればDOMは変更しないでください。また、JavaScriptのリフローを避けるためにインラインスタイルを設定しないでください。

 

7. 7.CSSクラスとコメントのディレクティブを無効にする

ディレクティブを作成するときに、ディレクティブを要素、属性、CSSクラス、またはコメントとして使用するように指定することができます。CSSクラスとコメントディレクティブが必要ない場合は、ディレクティブを無効にして、パフォーマンスを向上させてください。

 

1. 8.デバッグデータを無効にする

BatarangやProtractorのようなツールは、AngularJSがDOM要素に付けるバインディングとスコープに関するデータに依存しています。したがって、デバッグが完了したら、余分なデータを無効にしてアプリケーションをドラッグしないようにしましょう。

 

9. 9.Lodashを使う

Lodashを使用すると、アプリケーションのロジックを簡単に書き換えて、組み込みのAngularJSメソッドを改善し、アプリケーションのパフォーマンスを向上させることができます。 WebアプリケーションでLodashを使用しない場合は、ネイティブJavaScriptを使用してメソッドを自分で書き直すことができます。

 

10. 10.ng-showの代わりにng-ifまたはng-switchを使用する

ng-showディレクティブは、指定された要素のCSS表示を単にオンまたはオフに切り替えます。DOMから要素を削除するには、ng-ifまたはng-switchを使用する必要があります。

 

1. 11.可能であればng-repeatを避ける

ng-repeatディレクティブを過度に使用すると、パフォーマンスが大幅に低下する可能性があります。それに対処するために、たとえばグローバルナビゲーションをレンダリングするためにng-repeatを使用するのではなく、$ interpolateプロバイダを使用してオブジェクトをDOMノードに変換する前にオブジェクトにレンダリングすることで独自のものを作成できます。

 

12. 12.$ watchCollectionを使用する

$ watchを使用する際、3つ目のパラメータを追加すると、AngularJSは深いチェックを実行し多くのリソースを消費します。この回避策である$ watchCollectionは、$ watchの3つ目のパラメータとして動作しますが、各オブジェクトのプロパティの最初のレイヤーをチェックし、速度が落ちないようにします。

 

 

▼Angular JSに関して、こちらの記事もおすすめです！

 

 

 

 

 

※本記事は18 Quick Tips for Improving AngularJS Performanceを翻訳・再構成したものです。