2
データテーブルコンポーネントがあり、IE 11ではかなり遅くレンダリングされます。これはChromeでかなりまともです。しかし、私たちのメインブラウザはIE 11なので、IE 11ですばやく動作するはずです。角2のテーブルのレンダリングが遅くなります
IE 11で「UI対応」プロファイラを実行したとき、テーブルを読み込んだり並べ替えるときに最も大きなcuprimがDomEventでした。 appendChild、td、trタグのinsertBefore文が多く、これらのDOM操作の約8秒（以下のスクリーンショット）がかかります。 Chromeでは約2秒かかります。
私は、角度、彼らがエントリの多くのテーブルを最適化する方法を説明し、角度2でそれらを試してみましたが、1.xのIE 11
で、これまで運のいくつかのブログを経てすべての行をコンパイルし、1行ずつ挿入するのではなく、に挿入する方法があるかどうか疑問に思っていました。
私はplunkr（https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview）を作成しました。これは、読み込み時にIE 11プロファイラレポートで同じ量のDOMイベントを表示します。
他の提案も参考になります。
trackByIndex(index) {
return index;
}
あなたはより多くを読むことができます：
<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>
そして、あなたのコンポーネントで：
//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 {}
changeDetectionをOnPushに変更しようとしましたか？ –