Angular 2表渲染慢

Question

我们有一个数据表组件，它在IE 11中渲染速度非常慢。在Chrome中它非常不错。但是我们的主浏览器是IE 11，所以它应该在IE 11中快速运行。

当我运行＆＃34; UI响应＆＃34; IE 11中的分析器，最大的奖励是DomEvent在加载或排序表时。它有很多appendChild，用于td，tr标签的insertBefore语句，这些DOM操作大约需要8秒钟（截图如下）。在Chrome中大约需要2秒才可以接受。

我浏览了一些角度为1.x的博客，他们解释了如何优化一个包含大量条目的表格并在角度2中尝试过它们但是到目前为止在IE 11中没有运气。

我想知道是否有办法 编译所有行并将它们一起插入 ，而不是一个接一个地插入一行。

我创建了一个plunkr（https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview），它在加载时也会在IE 11分析器报告中显示相同数量的DOM事件。

任何其他建议也会有所帮助。

＆＃13;

＆＃13;

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <button (click)="loadTable()" class="btn btn-primary">Load</button>
    <table class="table">
      <tr *ngFor="let item of items">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </table>
  `,
})
export class App {
  name:string;
  items = [];
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
  
  loadTable() {
    this.items = this.getItems();
  }
  
  private getItems() {
    let items = [];
    for (let i = 0; i < 5000; i++) {
      items.push({ 'id': i, 'name': 'Name' + i })
    }
    return items;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用trackBy选项：

，唯一可以提高性能的方法

<button (click)="loadTable()" class="btn btn-primary">Load</button>
<table class="table">
    <tr *ngFor="let item of items; let i = index; trackBy: trackByIndex">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
    </tr>
</table>

在你的组件中：

trackByIndex(index) {
    return index;
}

您可以阅读有关trackBy here的更多信息。如果它有价值，我建议使用PrimeNG's datatable或ngx-datatable因为它们具有内置分页并且它们非常容易实现，我不明白这样做的重点你目前的做法。