Looking for tips on how to boost performance for an Angular 2 app specifically on Internet Explorer 11?
Our website runs smoothly on Chrome and Firefox, but experiences slow DOM rendering on IE 11. While I know the browser engine plays a part in this sluggishness, seeing a single change detection cycle take 30-40 ms for DOM painting on IE 11 makes me believe there could be more we can do with our implementation. To put it into perspective, Chrome only takes around 1 ms to paint the DOM, making IE's performance significantly slower.
Here's a snapshot of the performance monitoring we ran on IE11 for a DOM event (scroll).
https://i.sstatic.net/N2Gij.png
When comparing our results to websites like The Guardian, who also use Angular 2, their DOM event handling time is consistently under 2ms despite their more complex content display.
https://i.sstatic.net/3DtRb.png
This leads me to believe that there might be optimization techniques tailored specifically for IE 11. Here are some strategies we've already attempted:
- Switching from SystemJS to Webpack improved initial loading speed, but didn't impact DOM painting duration.
- We utilize core-js over es6-shim
- Implementing pure pipes for formatting and eliminating function calls from templates.
We're open to any suggestions or advice you may have!