web-dev-qa-db-ja.com

ng-include、ng-template、またはディレクティブ：どちらがパフォーマンスに優れているか

ヘッダー、サイドバー、フッターなどの再利用可能なウィジェットを使用してHTMLテンプレートを構築するための、パフォーマンスに関するangularアプリを設計するための最良の方法を知りたいです。基本的に、メインコンテンツは中央のDIVです。ルート間でコンテンツが異なり、ヘッダーとフッターはほぼ常に同じであり、サイドバーは特定のページで異なる場合があります。

--- index.html

<body ng-cloak>
  <div data-ng-include data-src="'partials/template/header.html'"></div>
  <div data-ng-include data-src="'partials/template/sidebar.html'"></div>

  <div ng-view></div>

  <div data-ng-include data-src="'partials/template/footer.html'"></div>      
</body>

--header.html

<div id="header">
   // ... HTML CONTENT 
</div>

$ templateCacheにheader.htmlを含める方がよいでしょうか？たとえば：

--header.html

<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
    <div id="header">
       // ... HTML CONTENT 
    </div>                    
</scipt>

または、ウィジェットごとに次のようなディレクティブを使用する必要があります：<appHeader></appHeader> ...？

これらのウィジェットを各画面に埋め込むために、パフォーマンス、まとまり、再利用性、スケーラビリティに関してどちらが優れていますか？

performanceangularjsangularjs-directiveangularjs-ng-include
14
guilhebl

大きなネストされたリスト（最大1000エントリ、4レベルの深さ）を持つビューで両方のパフォーマンスを比較しました。

結論

大きなデータ構造のレンダリングに関しては、ディレクティブはng-includeよりも50-100％高速です。 多くの複雑な/ネストされたデータ、特に再帰的なものをレンダリングする必要がある場合は、ディレクティブを使用してください。

また、機能要素（ウィジェット、フィルター入力など）の場合、ロジックはモジュール内にあり、コントローラーのどこかに浮かんでいないため、ディレクティブの方が適しています。

再帰の詳細については、ここを参照してください： 再帰in Angularディレクティブ

アプリケーションを論理セクション（ヘッダー、サイドバーなど）に分割しようとしている場合は、ng-includeの方がおそらく優れています。覚えておくべきことの1つは、ng-includeを介してコントローラーのスコープにアクセスする方が簡単であるということです。ディレクティブを使用すると、これは少し注意が必要な場合があります。

7
base34

現在、選択はパフォーマンスによって決定される必要はありません。

まず、パーシャルをサーバーまたはng-templateに配置し、ng-includeを使用してそれらを含めると、結果は同じになり、両方とも$ templateCacheにキャッシュされます。したがって、サーバーからの部分的なロードが遅く見える場合でも、これは1回実行されます。適切なサイズのパーシャルがある場合は、ng-templateを使用せずにサーバーからロードすることをお勧めします。

ページ構造に基づいて、少なくともディレクティブを使用する必要のないヘッダーとフッターについては、これらのコントロールのレンダリングは1つだけです。部分的でおそらくリンクされたコントローラーを備えた標準のng-includeで十分です。 ng-include自体はディレクティブであるため、パフォーマンスで比較しても意味がありません。

ディレクティブは、ページ間で使用する必要のあるコンポーネントが必要な場合に役立ちます。ページにはこれらの要素のインスタンスが1つしかないため、ヘッダーとフッターのナビゲーションがこの請求に適合しません。

それが役に立てば幸い。

16
Chandermani

Ng-includeはビュー部分をより小さなモジュールに分解するだけなので、ディレクティブを好みます。ディレクティブを使用することにより、一度だけ使用された場合でも、ページをより小さな独立したコンポーネントにうまくモジュール化できます。親ページのマークアップははるかに見栄えが良く、より多くのメソッドでコントローラーを乱雑にする必要はありません。いくつかのトリックを使用すると、スコープを介してディレクティブに固有のイベントやリモート呼び出しを処理することもできます（デフォルトの$ rootScope.digestの代わりに）。これにより、パフォーマンスが向上します。さらに、ディレクティブは必要に応じて直接DOM操作を行うことができます。

8
Ambika Sukla