Question

如何使用ngFor多次渲染模板时提高性能？我有一种情况，我需要根据计数显示相同的模板。我正在使用* ngFor。模板加载正确，但我担心性能。因为我需要重复显示相同的内容几千次，然后加载模板后性能会很慢。我在这里做了一个plunker演示{{3} }。请增加formarray中表单组的数量，相差1000，然后系统将变慢或发生故障。这就是我创建formarray的方式，

       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元素。渲染“准时”比渲染“一次性”更好。所有数据仍将存储在内存中，确保可以进行排序或搜索特定模板。

使用angular2 * ngFor缓慢渲染模板

2 个答案: