angular2 * ngForを使用したテンプレートのレンダリングが遅い

Question

ngForを使用してテンプレートを複数回レンダリングするときのパフォーマンスを向上させるにはどうすればよいですか？私はカウントに基づいて同じテンプレートを表示する必要がある状況があります。私は* ngForを使ってこれをやっています。テンプレートは正しく読み込まれますが、私はパフォーマンスについて心配しています。何千回も同じコンテンツを繰り返し表示する必要があるため、テンプレートが読み込まれた後にパフォーマンスが低下します。私はここでプランナーデモを作成しましたhttp://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview。 formarrayのformgroup数を1000の差で増やすと、システムが遅くなったり、機能が停止したりします。 これは、私がformarrayを作成する方法です

 for(var i=0;i<100;i++){ 
    let dummyFormGroup=this.fb.group({ 
    'name':[''], 
    'place':[''] 
    }) 
    this.dummyFormArray.push(dummyFormGroup); 
} 

そして、誰かが私に私が増える可能なアプローチを提案してくださいすることができます私はこの

<div *ngFor="let formgroup of dummyFormArray.controls" style="display:flex;flex-direction:row"> 
<p> 
    <label>Name:</label> 
    <input type="text" [formControl]="formgroup.controls['name']" /> 
</p> 
<p> 
<label>Place:</label> 
<input type="text" [formControl]="formgroup.controls['place']" /> 
</p> 

ようngForを使用してformarrayのコントロールをレンダリングテンプレートが読み込まれるとパフォーマンスが低下しますか？何千ものレコードをレンダリングする必要がある場合は、テンプレートがロードされるのを待っているので大丈夫です。しかし、テンプレートが準備できたら、この場合は* ngForを使用してシステムを高速化します。誰かがこの問題を解決するために私を助けてください。 ありがとう！

Answer 1

デフォルトでは、ツリー内のすべてのコンポーネントで変更検出の角度チェックが行われます。

たとえば、キーを入力コンポーネントにバインドすると、非常に面倒なことが起こります。ここでは、変化検出の

より：https://stackoverflow.com/a/39802466/4299560

Answer 2

またのみ表示テンプレートをレンダリングすることで、パフォーマンスを向上させることができます。たとえば、10個のテンプレートのレンダリングを開始し、ページの一番下までスクロールを開始すると、さらに多くのレンダリングが行われるとします。 Webブラウザは、すべてのDOM要素をレンダリングするのに時間がかかります。 「ジャスト・オン・タイム」のレンダリングは「オール・トゥ・ワン」のレンダリングよりも優れています。すべてのデータはまだメモリに保存されているので、ソートや特定のテンプレートの検索が可能です。