Le rendu des tableaux d'Angular 2 est lent

Question

Nous avons un composant de tableau de données et son rendu est assez lent dans IE 11. Il est plutôt correct dans Chrome. Cependant, notre navigateur principal est IE 11 et il devrait donc fonctionner rapidement dans IE 11.

Lorsque j'ai lancé le profileur "UI responsive" dans IE 11, le plus gros problème était le DomEvent lors du chargement ou du tri du tableau. Il y a beaucoup de déclarations appendChild, insertBefore pour les balises td, tr et cela prend environ 8 secondes juste pour ces manipulations DOM (capture d'écran ci-dessous). Dans Chrome, cela prend environ 2s, ce qui est acceptable.

J'ai parcouru quelques blogs d'angular 1.x où ils expliquent comment optimiser un tableau avec beaucoup d'entrées et je les ai essayés dans angular 2 mais pas de chance jusqu'à présent dans IE 11.

Je me demandais s'il y avait un moyen de compiler toutes les lignes et les insérer ensemble plutôt que d'insérer une ligne après l'autre.

J'ai créé un plunkr ( https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview ) qui montre également la même quantité d'événements DOM dans le rapport du profileur d'IE 11 lors du chargement.

Toute autre suggestion sera également utile.

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

Le seul moyen d'améliorer les performances est d'utiliser trackBy option :

<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>

Et dans votre composant :

trackByIndex(index) {
    return index;
}

Vous pouvez en savoir plus sur trackBy aquí . Si ça vaut quelque chose, je suggère d'utiliser La table de données de PrimeNG o ngx-datatable parce qu'ils ont une pagination intégrée et qu'ils sont très faciles à mettre en œuvre, je ne vois pas l'intérêt de procéder comme vous le faites actuellement.