tabs: high cpu usage with certain styles and tab properties applied

[hitigon]

Actual Behavior:

With applying some certain CSS styles and properties on md-tabs, md-tabs can consume a lot of CPU resources, directly affecting the performance of web apps and browser.

CodePen :

An example on Codepen, http://codepen.io/anon/pen/WGpJaO
by changing the tabs' box properties (margin) and setting up md-center-tabs = true, the application constantly takes 13%~25% CPU.

I figured out that in tabController.js,

  if (ctrl.shouldCenterTabs) {
      var tabWidth = calcTabsWidth(elements.tabs);
      if (totalWidth > tabWidth) {
        $mdUtil.nextTick(updateInkBarStyles, false);
      }
    }

if the tabs are centered, there is a process queue that is trying to reposition a selected tab by computing the width. In my case, totalWidth > tabWidth always will be true.

If you notice that in my example, i also set md-no-ink and md-no-ink-bar, updateInkBarStyles seems not take them under consideration.

I understand this might be a rare case, but I don't think it is ideal to allow updateInkBarStyles to process continuously.

Angular Versions: *

• Angular Version:1.5.7, 1.5.8
• Angular Material Version: 1.1.0-rc4, 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 53
• OS: * OS X
• Stack Traces: N/A

Thanks!

[vitaly-t]

I'm running the test, and can't see any CPU spike at all, it's quite flat-lined here.

Windows 10, Chrome 53.

Could it be OS-X specific?

[hitigon]

@vitaly-t quite interesting, just tested with a Windows 10 box, not much CPU usage. But OS X and Arch (with Chromium 52) are the same, 10% to 15% CPU usage. If I get ride of either center or the styles, everything becomes normal.

[crisbeto]

mdTabs does a lot of reflows, especially when you're using it with md-center-tabs. This used to be a big problem on IE, however @topherfangio managed to minimise it quite a bit. Here's what the timeline looks like in Chrome. Note that the red marks on top are potential performance bottlenecks.

[topherfangio]

I'll take a look and see if we can get this in the 1.1.2 release. At the very least, if you have disabled the ink bar, we definitely shouldn't be doing that calculation.