Angular 2 IE11 * ngFor performance

Question

I'm trying Angular 2, and I noticed that performance in Internet Explorer 11 slows down dramatically when using * ngFor more than 1,500 elements cyclically. It takes about 25 seconds with IE11, while less than 1 s in other browsers.

Pausing the debugger, I noticed that the code constantly calls the isNan function in es6-shim.js. Here's the call stack:

The working plnkr is here: http://plnkr.co/edit/sEujClHmuCbrydIiYQYL?p=preview . The code is very simple:

<ul *ngFor="#item of items"> <li>Item: {{item.itemKey}}</li> </ul> //Load items simulating remote load setTimeout(function(){ for (let i = 0; i < 1500; i++) { self.items.push(new Item(i+"")); } },1000); 

Anyone with the same problem? Any workaround or recommendations to improve performance?

Thanks in advance.

Answer 1

The problem is that IE does not have a built-in Map implementation. The set and get polyfill functions are extremely slow (compared to their native counterparts) and take up most of the time:

Perhaps - or, I hope, other Map policies are faster than es6-shim .

Update:

I tested your code with core-js , and its performance seems to be much closer to the performance of the embedded implementation.

Answer 2

create an angular project using the angular-cli command line

use ng build --prod to compile angular project

This will work the same as Chrome. I tested and worked like a charm in my application