Angular 2 performance IE11 *ngFor

Question

I'm trying Angular 2 and I noticed that performance on Internet Explorer 11 is dramatically slow while cycling with *ngFor over 1500 items. It takes about 25sec with IE11 whereas less then 1sec on other browsers.

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

A working plnkr 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 issue? Any workaround or tip for improving performance?

Thank you in advance.

Roughandready

I don't know if that's really the cause for the poor performance, but other browsers don't need es6-shim. – Venepuncture

maybe the is no workaround because IE11 does not have some native implementation and es6-shim is the only way to make the framework work even with poor performance – Roughandready

Ensure that you have prodMode enabled when you test performance. – Overdevelop

Answer 1

The problem is that IE has no native implementation of Map. The set and get functions of the polyfill are extremely slow (compared to their native counterparts) and take most of the time:

Maybe - or hopefully - other polyfills for Map are faster than es6-shim.

Update:

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

Venepuncture

Do you have a link to that plunker? I'm curious which subset of core-js you used and whether you have a recommendation on that score. – Settee

IE11 has basic support for Map and Set built-ins. The polyfill replaces them with its own implementation. I've patched es6-shim to improve its performance. – Unsure