md-tabs causes many $digest executions

[stevenmiles]

I've been suffering some performance problems with a fairly complex application in FF and IE. I found that my application was continually executing $digest. It seems that the digests are caused by md-tabs.

As the watch expressions are evaluated during a digest, the watch expression created by md-tabs that executes shouldPaginate() is executed continuously. In some profiling I did, shouldPaginate() accounted for the majority of the time in FF and IE. shouldPaginate() seems to be a fairly slow function which is amplified when it is continually being executed.

To measure digests I put a watch on $rootSope and logged out a message when the watch was evaluated. My assumption is the each evaluation of the watch is a $digest execution. Please correct me if my assumptions are wrong.

I measured by monitoring console output in the dev tools of various browsers. I found the following behaviours.

Chrome 43.0.2357.81 m
25ish $digests executions on initialization then 4-5 per tab change

Firefox 38.0.5
25ish $digests executions on initialization then continually executes $digest after first tab change

IE 11
Continually executes $digest after initialization.

OS: Windows 8.1
Angular Material: 0.9.7

http://codepen.io/stevenmiles/pen/yNMPzV

[zwirn1981]

Same $digest error in IE 11 when using "md-stretch-tabs" and if there are more tabs then space left, so it should paginate but instead breaks with $digest execution error shouldPaginate().

[stevenmiles]

I don't see a "$digest execution error". Also, what ever is causing the $digest executions isn't triggering the digest loop detection inside angularjs. I don't see any exceptions at all. What I'm seeing is just a lot of $digests, and in FF and IE, continuous $digests.

[ThomasBurleson]

@robertmesserle - sounds like a priority issue.

[stevenmiles]

This fix doesn't seem to have an effect on what I reported. I've' updated the code pen, and double checked that the changes from commit are present. I'm seeing the same behaviour in all browsers as in the first comment.

http://codepen.io/stevenmiles/pen/LVWgJy

Animated Gif of FF behavior.
24 digests after init then continuous digests after tab change.

In the codepen, I'm not setting md-stretch-tabs, so according to the docs this should default to auto. I've also changed this code pen so that the number of digests are shown on the page to save having to monitor console.

[rrajewski]

In IE 11 it seems that the updateInkBarStyles function is the culprit. Adding/Removing the classes (even if the end result is no change) is triggering the DOMSubtreeModified event and causing the infinite digest loop.

handler:
https://github.com/angular/material/blob/master/src/components/tabs/js/tabsController.js#L59

updateInkBarStyles:
https://github.com/angular/material/blob/master/src/components/tabs/js/tabsController.js#L535

[robertmesserle]

Ah, this seemed to address one of the digest issues, but missed another. Pushing a fix right now for the remaining issue.

[stevenmiles]

Commit 781929d has fixed this issue for FF. FF now behaves the same as Chrome. IE behaviour has changed slightly in that it now behaves like FF before 781929d, which is an improvement in that it doesn't start repeatedly digesting immediately after application start.

Sorry for being rather persistent about this issue, it seemed as if this issue was closed prematurely and remained closed despite providing updated codepens that demonstrated the issue wasn't fixed after 5372710.

Thanks for the fix!

[robertmesserle]

@stevenmiles No need to apologize, I appreciate the updates! I will try to look into this on IE today.

[robertmesserle]

Also, I thought I had re-opened it before - leaving it closed was accidental. =p