title: Angular 2 table renders slow
body: <p>We have a data table component and it renders pretty slow in IE 11. It is pretty decent in Chrome. However our main browser is IE 11 so it should work fast in IE 11.</p>
  
  <p>When I ran the "UI responsive" profiler in IE 11, the biggest cuprit was DomEvent when loading or sorting the table. It has lot of appendChild, insertBefore statements for td, tr tags and it takes around 8 seconds of just these DOM manipulations (screenshot below). In Chrome it takes around 2s which is acceptable.</p>
  
  <p><a href="https://i.stack.imgur.com/IPmRB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IPmRB.png" alt="IE 11 profile"></a></p>
  
  <p>I went through a few blogs of angular 1.x where they explained how to optimize a table with lot of entries and tried them in angular 2 but no luck so far in IE 11. </p>
  
  <p>I was wondering if there is a way to <strong><em>compile all the rows and just insert them together</em></strong> rather than inserting one row after another.</p>
  
  <p>I created a plunkr (<a href="https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview</a>) which also shows the same amount of DOM events in IE 11 profiler report when loading.</p>
  
  <p>Any other suggestions will also be helpful.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//our root app component
  import {Component, NgModule, VERSION} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;button (click)="loadTable()" class="btn btn-primary"&gt;Load&lt;/button&gt;
      &lt;table class="table"&gt;
        &lt;tr *ngFor="let item of items"&gt;
          &lt;td&gt;{{item.id}}&lt;/td&gt;
          &lt;td&gt;{{item.name}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    `,
  })
  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 &lt; 5000; i++) {
        items.push({ 'id': i, 'name': 'Name' + i })
      }
      return items;
    }
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}</code></pre>
  </div>
  </div>
  </p>