ie11: Terrible performance, but not with LumX

[ross-nordstrom]

Overview

We have an application we're trying to release to production using Angular Material, but cannot get it to perform in IE10/11. After a lot of struggling (is Angular the problem? Is this, that, or the other dependecy a problem?), we've found that Angular Material framework is simply slow in IE. In comparison, LumX (a different Material Design + Angular framework) works fine in IE10/11.

Plnkr Demo of the Problem

To demonstrate the problem, I implemented a simple page with a Toolbar and list of Items in both Angular Material and LumX. They both perform equally well in Chrome, but ng-material is much slower in IE.

Performance Comparison

To test performance, I did the following:

• Entered 900 in input box and submit (click Add People or hit Enter key)
• Visually stop-watch the time from submission to the (xxxx) number updating

Plnkr	Chrome	IE11
ng-material demo	~1s	~8s
lumx demo	<1s	~1s

Versions Used

Laptop: Win7 64-bit, 16gb RAM, Core i7
Chrome version: Version 40.0.2214.115 m
IE11 version: 11.0.9600.17633

While I'd prefer to use Angular Material going forward, this performance difference in IE10/11 is a deal breaker for our product. Any help or insight into this issue is much appreciated!

PS: I've also noticed in IE that when the ng-material demo page regains focus (e.g. click a different window then click back in), the page seems stuck and it often takes a while to scroll.

[brandon-shannon]

+1!

[codyhanson]

👍

[jmorales4]

+1

[aangoulvant]

+1

[wilkenstein]

+1

[ThomasBurleson]

@ross-nordstrom - Thank you for this information. Tomorrow we should have a release of Angular Material v0.8.3. Before our next milestone 0.9 release, we will address the IE11 performance issues... using your plunkr as starting points.

[ThomasBurleson]

@robertmesserle - it would be great if you had a chance to investigate this.

[schreinbo]

+1 Thanks!

[kschwidder]

I have the same experience when including the angular gantt within a tab in angular material.
When I started with 0.7.0 the response time was significantly better.
What I have discovered so far is that the $apply time is significantly higher in IE than chrome/firefox.
Does the material framework fires more $apply fragments ? Or is is a topic for the angular team ?

[gkalpak]

_{(I would say it is more of a topic for the IE11 team :P)}

[kschwidder]

Might be. Most enterprise customers are using IE on their desktops :-( If the apps are not performing well it has an impact.

[robertmesserle]

@ross-nordstrom Can you confirm that this is resolved for you? Try the following files:

https://cdn.rawgit.com/angular/bower-material/v0.8.3-master-f62fd48/angular-material.js
https://cdn.rawgit.com/angular/bower-material/v0.8.3-master-f62fd48/angular-material.css

[robertmesserle]

Closing for now, please re-open if the issue persists.

[ross-nordstrom]

@robertmesserle That didn't fix it. I updated the ng-material plnkr from before with the new versions above and am seeing the same issue in IE11 as described in my earlier post.

Edit: I'm not sure I can re-open this, but it needs to be reopened

Edit 2: The test I'm running is simply opening that up and add 900 people, just like before.

[bradmartin]

+1 / performance is quite terrible in an older ASP.NET app we have. And the ng-material demo site is sluggish as others have stated previously.

[ThomasBurleson]

@paulflo150 - I created a Pull Request and Gist that shows a refactoring of your layout directives.

[cleever]

@paulflo150 - This is awesome!

[paulflo150]

@ThomasBurleson - thank you sir, the refactoring looks great! I will try to create a PR this evening.

@cleever - thanks, all the credit goes to those who suggested class selectors were the answer. :)

[ThomasBurleson]

@paulflo150 - would you mind giving me a email ping: ThomasBurleson@gmail.com. Thx.
@ALL - Thanks for everyone's help researching this issue.

[timnix]

Great work! @paulflo150 & @ThomasBurleson, I reworked the gist Thomas created and got it working on the latest from here, I wasn't sure how to submit it to you guys since there was already a pull request from Thomas so here is the Gist i forked from @ThomasBurleson.

[ThomasBurleson]

@timnix - I liked your changes so much, I updated my PR to @paulflo150

[timnix]

@ThomasBurleson thanks! I was doing a little more tinkering, what are your thoughts on adding the hide and show attributes to this?

[ThomasBurleson]

@timnix - let's see what you propose... in a Gist ?

[timnix]

@ThomasBurleson Here is the updated Gist and thanks for the RegEx tip. Also, here is the updated SASS in a Gist.

[paulflo150]

@ThomasBurleson and @timnix thanks for all the help! I just submitted the PR.

[calebeaires]

+1

[kschwidder]

Amazing job !! The responsiveness has been significantly increased !
Thx

[ThomasBurleson]

Fixed with @paulflo150's PR #4282 and the commit SHA 46b5500

[ThomasBurleson]

@paulflo150 - care to regenerate the performance capture (for Select; as done above) with the latest code from master ?

[ThomasBurleson]

@kschwidder - plz try it now [with the latest updates on master] and http://material.angularjs.org

[paulflo150]

@ThomasBurleson - there is a slight difference, but from what I can tell that is because of the navigation (not sure if there were any changes made to it the last few days). Other than that it looks good to me.

[stevenmiles]

Tested in http://codepen.io/stevenmiles/pen/MwNJWd and performance issue described in #3455 went away.

Thanks @paulflo150 & @ThomasBurleson

[DOrlov77]

+1 the problem is here still... It's horribly slow with IE11. Just take a look on dialogs page demo:
https://material.angularjs.org/latest/demo/dialog
That issue should be reopened.

[Splaktar]

@DOrlov77 please open a new issue.

[parshotam]

md-tabs is very slow working.Following code i used

            <md-tab label="tab1" align="l" md-on-select>
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab One</h1>
                    <div class="row">
                        <md-select class="col-lg-8 increasewd" name="tr_type" ng-model="tr_type" placeholder="select market"  aria-label="" required>
                            <md-option  ng-value="m" ng-repeat="m in lstMarkets" >{{m.name}}</md-option>
                        </md-select>
                    </div>
                    <div class="row" style="margin-top: 50px !important">
                        <md-select class="col-lg-8 increasewd" name="tr_type2" ng-model="tr_type2" placeholder="select market"  aria-label="Tariff" required>
                            <md-option ng-value="m" ng-repeat="m in lstMarkets" >{{m.name}}</md-option>
                        </md-select>
                    </div>

                </md-content>
            </md-tab>

            <md-tab label="tab2"  md-on-select>
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab Two</h1>
                    <div class="row">

                            <md-select class="col-lg-8 increasewd" name="tr_type" ng-model="tr_type" placeholder="select market"  aria-label="Tariff" required>
                                <md-option ng-value="m" ng-repeat="m in lstMarkets" >{{m.name}}</md-option>
                            </md-select>

                    </div>
                    <div class="row" style="margin-top: 50px !important">
                        <md-select class="col-lg-8 increasewd" name="tr_type2" ng-model="tr_type2" placeholder="select market"  aria-label="" required>
                            <md-option ng-value="m" ng-repeat="m in lstMarkets" >{{m.name}}</md-option>
                        </md-select>
                    </div>
                </md-content>
            </md-tab>

            <md-tab label="tab3" md-on-select>
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab Three</h1>
                    <div class="row">
                        <md-select class="col-lg-8 increasewd" name="tr_type" ng-model="tr_type" placeholder="select market"  aria-label="" required>
                            <md-option ng-value="m" ng-repeat="m in lstMarkets" >{{m.name}}</md-option>
                        </md-select>
                    </div>
                    <div class="row" style="margin-top: 50px !important">
                        <md-select class="col-lg-8 increasewd" name="tr_type2" ng-model="tr_type2" placeholder="select market"  aria-label="" required>
                            <md-option ng-value="m" ng-repeat="m in lstMarkets" >{{m.name}}</md-option>
                        </md-select>
                    </div>
                </md-content>
            </md-tab>
        </md-tabs>

In lstMarkets have a thousand records of markets. When i click the the second tab it take a more time to show the second tab . When i remove the or ng-repeat in md-select options then it works fine. Have a any solutions load the tab normally with all md-select options ?

[Splaktar]

@parshotam this issue is closed. Please post questions like this in the Angular Material forum on Google Groups. There is a link to the forums on the bottom of the getting started page.

[stevenmoberg]

I just saw this today with very large content and removed all css/js and added them back 1 by 1 to determine what was causing the issue. jquery-ui.css slowed it down so I removed all its css and slowly add it back and found that the single ".ui-button:active" style was causing the issue even through I did not have any elements with this classname on the page. I removed the ":active" selectors from my style sheets and I got the performance back. It doesn't make any sense and I haven't seen any other reporting of this IE11 issue but thought it might help.