Angular 2 表格呈现缓慢

Question

我们有一个数据表组件，它在 IE 11 中呈现得相当慢。它在 Chrome 中相当不错。然而，我们的主要浏览器是 IE 11，因此它在 IE 11 中应该可以快速运行。

当我在 IE 11 中运行“UI 响应式”分析器时，加载或排序表格时最大的问题是 DomEvent。它有很多用于 td、tr 标记的 appendChild、insertBefore 语句，仅这些 DOM 操作就需要大约 8 秒(下面的屏幕截图)。在 Chrome 中，大约需要 2 秒，这是可以接受的。

我浏览了一些 Angular 1.x 的博客，其中解释了如何优化包含大量条目的表格，并在 Angular 2 中尝试了它们，但到目前为止在 IE 11 中没有成功。

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

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

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

//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 {}

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因为它们具有内置分页功能，而且非常容易实现，所以我看不出按照您当前的方式进行操作有什么意义。