Very slow bootstrapping of large templates in IE11

[zachsnow]

Issue

We recently started seeing very poor application loading performance in IE11. After some searching, we stumbled onto this Microsoft patch http://support.microsoft.com/kb/2962872 the timing of which coincides well with reports of slowness in our application. (Note in Issues there are known performance issues with the patch).

To reproduce: take a large-ish Angular template (say, 1MB) and attempt to bootstrap it (either automatically or manually). If you are running without KB2962872 installed, you'll see that while it might take a few seconds (significantly longer than Chrome/Firefox/Safari), it will load in a somewhat reasonable amount of time. However, if you install KB2962872 (which should be happening automatically) you'll find that it often takes significantly longer, sometimes as much as 50-100 times longer than Chrome/Firefox/Safari -- seemingly too long for what it's doing.

See this simple example -- I see times of ~1-2s in "modern" browsers other than IE, and anywhere from 10s-90s in IE 11 (and sometimes IE 10, but I wasn't as able to pin that down). The most frequent offender seems to be IE11 under Windows 7 and Windows 8.1, which almost always show really bad behavior in our testing. (We tried several VMs, via VirtualBox and Fusion, and a handful of physical machines).

Thoughts

• First, even ignoring KB2962872, bootstrapping large templates in IE can be enough slower than other browsers that there may be something funny going on, and it might be worth investigating.
• Second, once you throw KB2962872 into the mix (which all up-to-date installs of Windows 7 and Windows 8.1 at least should have) performance is so abysmal on large templates as to be unusable; while Microsoft has acknowledged that the patch has a performance regression it is probably worth trying to find a way to work around it anyway.

Unfortunately, I don't know enough about AngularJS internals to make immediate headway, but I'm willing to try if someone has a sense of where to begin.

[zachsnow]

(To be clear, the example above is very large to ensure the behavior is demonstrated, but we've seen issues even with templates of just ~200-400KB).

[zachsnow]

Using the "UI Responsiveness" tool in IE11 on the linked example, I found that occasionally individual invocations of the insertBefore DOM method were taking hundreds of milliseconds, whereas when the bad behavior didn't occur they took the expected <1ms. (This is not including style calculation or layout, according to the tool).

I'm the owner of #8614, and I was just about to roll back that update, but I wanted to see if there was a noticeable difference, so I fired Up IE11 before I rolled back and started clicking through, and the speed issue was gone. Also, there was another unrelated issue where IE was opening javascript:void(0) links like normal links that also disappeared, so it looks like MS may have resolved this issue over the weekend in another update.

Apparently, this behavior was anomalous, the slowness is still there. The javascript link issue is fixed though.

[zachsnow]

A very recent update seems to have fixed the issues I described, at least in initial testing. See: http://support.microsoft.com/kb/2991509

While still not as fast as Chrome/Safari/Firefox, the egregious load times exhibited before do seem to have dropped to a couple hundred milliseconds.

[Narretz]

Thanks for the update @spuy767 .It looks like the differences in bootstrap duration are now normal with regards to browser variation. Still, maybe there's a deeper problem here, so I'll keep this open for no. @IgorMinar has recently done some work related to performance, maybe he can take a look.

[IgorMinar]

I looked into this briefly. While IE11 is the fastest IE yet, it is still slow in certain areas compared to other browsers.

The recent perf regression was cased by a IE updates and the fix is described in http://support.microsoft.com/kb/2991509 as @zachsnow pointed out.

I don't think that there is much we can do about this. Users will have to install the update to patch the browser.

btw I profiled @zachsnow's example and we spend about half of the time in compiling and the other half in linking/digesting. The good news is that after our recent perf improvements the linking is now ~2x faster.

There is definitely a lot of room for improving the compile phase performance, but honestly in a typical app very small portion of the overall time is spent there. @zachsnow's example is an anomaly and any performance sensitive app should not generate such huge templates - instead of unrolling the templates on the server, do it on the client.

[FabrizioA]

Hi, currently I have a very subdole problem to solve with IE11 and AngularJS.
My page is consist of two nested ng-repeat to create a tabset with a table inside any tab.
Here the code: http://pastebin.com/0fffPz5Z
In the code, each application's object have around 1.000 item's related objects.
With a Chrome, Safari and Mozilla I have no problem, all is superfast! With IE11 the page go slow and IE11 show me the message of a too slow page's script....
I've created an IE11 interface's profiling with this result:
https://www.dropbox.com/s/y5xuystxht6gjkr/IE11-interface-profiling.png?dl=0

Is this another IE11's bug??? Sorry for my English and thanks in advance for any suggestion.

[LuckyAmanVerma]

I am getting the same issue after adding bootstrap4.
IE slows down.