1423398 - High CPU usage with Tree Style Tabs, DisplayList+LayerBuilding

Status: NEW

(Core :: DOM: Animation, enhancement, P3)

Description

[Steve Fink [:sfink] [:s:]]

In my 59.0a1 (2017-11-30) Nightly, I got into a state where the CPU was churning constantly. https://perfht.ml/2ipLhya

It's massively janking the main thread, with a series of DisplayList then LayerBuilding.

I am running Tree Style Tab. When I show the Bookmarks sidebar instead, the CPU usage goes away. The Usage came back, but not as bad, after I switch back: https://perfht.ml/2iouMCb

mstange says it looks like a CSS animation.

Comment 1

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

:bbirtles, would you have a chance to look at this profile and confirm?

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Last time I saw the Tree Style Tab code, they run CSS animations on a position:absolute element which is basically out of view.  I guess that is the reason.  We don't throttle such animations yet (bug 1421507).

Comment 3

[Brian Birtles (:birtles, Feb 26~ parental leave)]

I'm currently on leave but will have a look next year. At a glance I see mozilla::EffectSet::GetEffectSet in the profile so it does sound like there is some sort of declarative animation (CSS animation/transition or web animation) involved.

That said, if hiro has looked at this before I'm sure he's right about what is going on. We probably need to prioritize bug 1421507 (and bug 1237454) next year.

Comment 4

[Brian Birtles (:birtles, Feb 26~ parental leave)]

That does appear to be a CSS animation that's spinning the refresh driver there, and it does appear to be running on the main thread. Hiro's analysis in comment 2 seems to be on the mark.

I dug through the source for the extension and I suppose it's the throbber animation to blame since it seems to be the only one that runs infinitely.[1] Furthermore, I notice some of the elements to which that animation is applied and indeed, some are positioned absolutely. I'm guessing we have a tab that is stuck loading that is offscreen causing us to hit bug 1421507.

[1] https://github.com/piroor/treestyletab/blob/91cf2f9432afea64c14035d5f494df9603a5e2d9/webextensions/sidebar/styles/throbber.css#L51

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

There is some good analysis here too: https://github.com/piroor/treestyletab/issues/1703

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Now bug 1421507 has been landed.  So the throbber should not consume CPU. But now I suspect the throbber does not animate due to bug 1421506.

Comment 7

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Steve, are you still seeing this on Nightly?

(Or, alternatively, are you seeing the throbber animation *not* animate now as suggested in comment 6?)

Comment 8

[Steve Fink [:sfink] [:s:]]

I do not see the throbber animating. Then again, I don't recall seeing it animate before, but I can't say I necessarily *would* have noticed either.

The behavior now seems way better. Watching and recording the CPU usage via top, it was the same whether I had the Bookmarks sidebar or the Tree Style Tab sidebar, ranging from 11-28% (while I was monitoring it, TST had *less* CPU usage.) I don't know where that CPU usage is coming from; the browser was idle for all of those time ranges. I grabbed profiles but haven't really looked at them (note that those numbers are with the profiler *off*. I turned it on afterwards, to gather profiles.):

Profile where the last several seconds had TST showing: https://perfht.ml/2qR1TpB
Profile take a little later, where the last few seconds had Bookmarks showing: https://perfht.ml/2qRpsi2

CPU usage is higher when the profiler is active, not that it's relevant.