Material: IE11 Performance in 1.0.6

[char0n]

There has been significant performance degradation in release 1.0.6 for IE 11. In 1.0.5 and IE 11 performance was not very good but it was still acceptable; but, running on 1.0.6 makes project in angular-material unusable. UI freezes and becomes irresponsible. Can you imagine some reason why there is such a dramatic performance decrease in patch version ?

Is there somebody else that have experienced something similar ?

[jpschill]

I have the same issue! When I update to 1.0.6 every user interaction (switching tabs, selecting side nav list item, scrolling in virtual repeat,…) in my app feels significantly slower in IE11 than before update. I can constantly reproduce this. When I go back to 1.0.5, the performance in IE is slow compared to Chrome/FF, but acceptable. As soon as I update to 1.0.6 the performance is, in my opinion, not acceptable anymore. So there must have been some changes in 1.0.6 that have very negative effect on IE11 performance. This is very critical to me. Since many of our customers stick with IE11, I am not able to upgrade to 1.0.6.

[char0n]

Thanks for confirming.

Related: There is an issue with Firefox, which I have addressed here: https://github.com/angular/material/commit/99c9b60e4521b388ee979d796cec247cffe44499#commitcomment-16449602

It doesn't concern performance but applications in holy grail layout will stop working correctly. Checkout the link above for solving the problem in Firefox for 1.0.6 version.

[srweeks]

Experiencing same performance issues in IE 11 and edge

[mbeckenbach]

I can confirm, that there are massive performance issues in IE11 with 1.0.6. I have about 30% CPU while doing nothing. Edge and Chrome work fine. Same issues with 1.0.5. 1.0.0 seems to be a bit better. But is still very slow.

[kieranmcdev]

We are also seeing huge performance issues in IE11 with AM 1.0.6 which make our site unusable. 1.0.5 is much more usable in comparison, please look into these issues

[mbeckenbach]

I did some refactoring of my ng-repeats. now 1.0.5 runs is quite fast. But as soon as i update to 1.0.6 everything becomes slow

[vajnorcan]

I can confirm that it runs very slow, just open the material demo page in IE11 and see it yourself. I've deployed to windows 10 mobile and the performance is lackluster.

[david-gang]

I found out something interesting:

When we disable the css theming by setting the constant

module.constant('$MD_THEME_CSS', '');

the performance of ie gets better.

I am not sure what the reason is. Maybe it is the number of selectors. We don't know what the big O of ie is :-)

It would be interesting to hear if you also see this in your web apps.

[YoungtreeDev]

IE11 with AM 1.0.6 is pretty unusable. AM 1.0.5 was quicker by far. It seems that IE refresh isn't hitting -> does it have trouble loading the AM JavaScript or maybe just processing it? How does IE handle the cache of JS code in memory?
We've downgraded to 1.0.5 in any event. A fix for this would be great, thanks!

[vajnorcan]

@david-gang well, that helps but I've lost all the css and styling ;)
@YoungtreeDev even with 1.0.5 I wouldn't call AM a quick UI on IE Edge (!) on WM10

[jpschill]

@david-gang
With AM1.0.5 I can confirm that disable css theming has a big impact on IE11 performance. The UI feels faster/smoother. So optimizing AM´s styles for IE would be very helpful to improve IE performance in general, I think.
But with AM1.0.6 even disable css theming does not help. It feels extreme slow, with or without styles enabled.

[Norsten]

Is anyone else seeing improvements with 1.1.0 rc1 ?

[lpillonel]

Yes it is working now like before 1.0.5

[char0n]

I can also confirm that the performance and flex issues (https://github.com/angular/material/issues/7382) in IE11 are gone. The performance is on acceptable level now, even though there are other problems regarding some components (card),

Note:
in 1.1.0-rc1, IE11 performance issue is fixed. But this release created huge issues in Firefox, which I will try to document in other issue.

[ThomasBurleson]

FYI - The Angular Material team is currently investigating this!

[hamsaya]

I just posted this #7832 could be related.

[ganySA]

I am also having incredibly bad performance with IE 11+ it seems to be with all the "styleCalculation" anything from click event adding ripple.

This is when you really appreciate Chrome :+1:

[david-gang]

Hi all,

I wanted to share with you the approach I thought, how to find the slowness in my material application.
My assumption is that there are several css rules which are hard for internet explorer to digest and therefore the style calculations take lots of time.
My plan is to take an use case of my application and code a protractor function. Then I will take the material css. I will start from an empty css file and every time i will add one rule and run my protractor function. The running time is measured in every iteration. I hope that i will find the top 10 rules which are responsible for the greatest diff in running time.

What do you think about this approach?
Ping - @topherfangio

Thanks,
David

[rawoke083]

Would love to see the results !

On Sun, May 1, 2016 at 8:17 AM, David Gang [email protected] wrote:

Hi all,

I wanted to share with you the approach I thought, how to find the
slowness in my material application.
My assumption is that there are several css rules which are hard for
internet explorer to digest and therefore the style calculations take lots
of time.
My plan is to take an use case of my application and code a protractor
function. Then I will take the material css. I will start from an empty css
file and every time i will add every time one rule and run my protractor
function. The running time is measured in every iteration. I hope that i
will find the top 10 rules which are responsible for the greatest diff in
running time.

What do you think about this approach?
Ping - @topherfangio https://github.com/topherfangio

Thanks,
David

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/7377#issuecomment-216019030

[ThomasBurleson]

@david-gang - Sounds great. And thank you for your research efforts.

Please use the latest code from master for your testing.

Testing Considerations

• If using IE, manually include angular-material.layouts.ie_fixes.css [recommended!]
• use <body md-layout-css /> to disable ngMaterial Layout directives while testing performance

with Layout injection disabled you may want to manually include angular-material.layout-attributes.css [not for IE!]

[david-gang]

Hi all,

I wanted to update you on my efforts and challenges i have here.
In my test case removing the material css has nearly no effect on the performance (which is quite counter intuitive). I see constantly that when i disable the $MD_THEME_CSS by writing
app.constant('$MD_THEME_CSS', ''); I get a gain of 1.4 seconds. It goes down from 5.2 to 3.8 seconds. This is roughly 30 percent. I can research it further but i am posed with the following challenge.

There are fluctuations of 200 to 300 ms when running the ie driver with selenium. This happens even when i restart the browser between runs.
If my measuring tool is so unreliable how can i then see the effect of a single css rule?
I tried to delete every time a half of the css rules (like in binary search) but did not find anything interesting.
I could run every cycle x times and then take the median. What do you think? How would you proceed here?
I would like to here your suggestions here.

Maybe this is also connected to https://github.com/angular/material/issues/8218 and not connected to a single rule

Thanks,
David

[kslo88]

Hello, I have a form that uses several md-select's. When md-select is clicked to view the md-options, it takes 4-5 seconds to display the options in firefox whereas it is almost instant in chrome and safari. Is it related to this issue?

[abouillon]

@david-gang One thing I have found profiling the app I am working is that IE11 uses a lot of time calculating the layouts. Some performance is gained back by minimizing the number of extra processes running on Windows when using IE, but in some cases that is unavoidable. I also found that using $provide.constant('$MD_THEME_CSS', '') did not show any performance gains on my end at all.

It almost seems like the issue isn't even related to the CSS at all, but rather related to how IE handles DOM manipulations and injecting new elements into the DOM.

[Splaktar]

Seeing this as well in an app with Angular Material versions 1.0.6, 1.0.7, and 1.0.8.

1.0.5

1.0.6
Note the 85% of the time spent doing style calculations.

[Splaktar]

Also can confirm that this is fixed in 1.1.0-rc4 and master (but I can't move to that atm on this app due to some breaking changes to inputs and themes).

[newbyca]

I haven't had time to compile an example, but on a recent project I had a relatively long form, lots of input controls. The form took many tens of seconds to load in IE11 and Edge, but was fine in Chrome. I can confirm that commenting out the material stylesheet mitigated the issue. I have since removed ng material unfortunately, but was using 1.0.7.

[chrisguerrero]

Hi all,

I've been troubleshooting the same performance issues in IE11 (and Edge). It appears as though a change was introduced in 1.0.6 that started including the layout attribute selectors in the compiled angular-material.css file:

https://github.com/angular/bower-material/blob/v1.0.6/angular-material.css#L5153

These selectors cause significant performance issues in my app, making it completely un-usable. The selectors are no longer included in the compiled CSS in v1.1.0-rc4, but if you manually include them, the IE performance issues still exist.

[ThomasBurleson]

Please use master to do your performance testing (or resolve your performance issues).

npm install http://github.com/angular/bower-material#master

master is the branch that will be used for the upcoming, important v1.1.0 release. The 1.0.x releases, meanwhile, are patch releases that do not contain many of the more significant fixes and improvements.

[topherfangio]

@chrisguerrero Also note that those layout attribute selectors were not intended to be added in 1.0.6 and were subsequently removed in 1.0.7.

Are you seeing some that were leftover?

[chrisguerrero]

No, I've now upgraded to the latest release. I just wanted to share my findings in case anyone else ran into this issue with 1.0.6 specifically.

[ThomasBurleson]

@chrisguerrero - Thank you.
Closing as resolved. Please reply if that is not the case.