使用 angular2 *ngFor 缓慢渲染模板

Question

如何在使用 ngFor 多次渲染模板时提高性能？我有一种情况，我需要根据计数显示相同的模板。我正在使用 *ngFor 执行此操作。模板加载正确但我担心性能。因为我需要重复显示几千次相同的内容，然后模板加载后性能会变慢。我在这里做了一个 plunker 演示http://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview。请增加formarray中formgroups的数量，相差1000，那么系统会变慢或崩溃。 这就是我创建表单数组的方式，

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

我像这样使用 ngFor 在 formarray 中渲染控件

  <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 快速。有人请帮我解决这个问题。 谢谢！

Answer 1

默认情况下，角度检查树中每个组件的变化检测。

因此，例如，如果您将键绑定到您的输入组件，事情很快就会变得一团糟。

更多关于变更检测的信息：https://stackoverflow.com/a/39802466/4299560

Answer 2

您还可以通过仅渲染可见模板来提高性能。假设您开始渲染 10 个模板，当您开始滚动（到页面底部）时，您会渲染更多。 Web 浏览器需要一些时间来呈现所有 DOM 元素。渲染“准时”比渲染“一次性”更好。所有数据仍将保留在内存中，确保可以进行排序或搜索特定模板。