DOMレンダリング時間を改善するには

Question

私たちはビューを切り替えるのにui-routerを使用している非常に複雑なAngularアプリケーションを持っています。我々は最近、ビューの切り替えが300msから1500msの遅れを生み出すことに気づいた。

我々は、次の原因を排除：

• AJAX呼び出し - データがすでに
• 非同期HTMLテンプレートのフェッチをロードされている - 私たちはhtml2js
• に$ダイジェストに複雑なロジックを使用している - プロファイラは表示されませんでした
• と呼ばれ、双方向バインディングではなく1回限りのバインディングを使用すると、最初のレンダーにほとんど影響しません。

遅れは、ページにあまりにも多くのDOM要素を描画することによって発生する可能性が高いとわかりました。

明示的な解決策とは別に、レンダリングされたDOM要素を減らすこと（同じ機能を維持することは容易ではありません）では、DOMのレンダリング速度を改善するために何ができますか？

私たちの意見は、多くの小さな指示で構成されています。ディレクティブとDOM要素を非同期に（UIをブロックせずに）レンダリングする方法や、ディレクティブ/ビューのDOMツリーをレンダリングしているときにスピナーを表示する方法はありますか？

Answer 1

ng-hide/ng-showを使用して読み込み時間を短縮する方法は、排他的にng-swgにすることです.DOMのこれらの部分が必要な場合にのみロードし、最初にページにロードされます。

ngIfは、display cssプロパティによる可視性を変更するのではなく、DOM内の要素を完全に削除して再作成するという点で、ngShowおよびngHideとは異なります。この相違が顕著である一般的なケースは、first-childまたは：last-child疑似クラスなど、DOM内の要素の位置に依存するCSSセレクタを使用する場合です。残念ながら、DOMノードの多くをレンダリング

From Angular docs

Answer 2

レンダリング時間に最も大きな影響力を持っているものです。

ng-ifを使用するだけでなく、DOMに少ない要素が追加されるだけでなく、これらの要素に接続された命令やコントローラはコンパイルされないため、場合によっては大幅に強化されます。

それ以外の場合は、一度に公開されたページに非常に多くの要素が本当に必要かどうかを判断することに焦点を当てる必要があります。多くの場合、すぐにすべてが表示されるわけではありません。ページが非常に大きい場合や、ng-repeat（世界的に有名なパフォーマンスキラー）を使用している場合は、limitToで表示されるノードの量を制限することを意味する「無限スクロール」を使用することです。ng-repeatの場合たとえば、ユーザーがスクロールダウンしたときにこの制限を延長します。

PS：Google Chromeは、デベロッパーコンソールからタイムラインを有効にして完全に読み込んだ後で停止させると、遅れを引き起こす原因をプロファイリングするのに非常に優れています。

PPS：あなたは非常に遅いウォッチャーを持っていないことを確認する1つの方法は、開発者に対しコンソールからこれらの行を実行することです（スコープを持っている方のノードで体を置き換える）

var scope = $('body').scope(); 
console.time('100 apply'); 
for (var i=0; i<100; i++) scope.$apply(); 
console.timeEnd('100 apply'); 

このshoudn't大規模なアプリケーションの場合は100〜300ms以上かかることがあります。