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，因爲它們具有內置分頁功能，而且它們很容易實現，我不認爲按照您現在這樣做的方式執行此操作。