Angular 2 table呈现缓慢

Question

我们有一个数据表组件，它在IE 11中渲染得非常慢。它在Chrome中相当不错。然而，我们的主要浏览器是IE 11，所以它应该在IE 11中工作得很快。

当我在IE 11中运行“UI响应式”分析器时，最大的cuprit在加载或排序表时是DomEvent。它有很多appendChild，insert，td和tr标记的insertBefore语句，只需要8秒左右的DOM操作（截图如下）。在Chrome中大约需要2秒左右，这是可以接受的。

我通过角1.x中的一些博客去，他们解释如何优化表条目很多，并在IE 11

在角2，但没有运气尝试过至今

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

我创建了一个plunkr（https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview），它在加载时也会在IE 11 profiler报告中显示相同数量的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; 
} 

你可以阅读更多约trackByhere。如果它是值得的，我建议使用PrimeNG's datatable或ngx-datatable，因为它们具有内置分页功能，而且它们很容易实现，我不认为按照您现在这样做的方式执行此操作。