Open Bug 1112701 Opened 6 years ago Updated 5 months ago

CSS animations cause many wakeups in Diablo sub-reddit

Categories

(Core :: Layout, defect)

x86_64
macOS
defect
Not set
normal

Tracking

()

People

(Reporter: froydnj, Unassigned)

Details

(Keywords: perf, power, Whiteboard: [Power:P2])

STR (I observe the same behavior on release and nightly):

1. Go to http://www.reddit.com/r/Diablo/comments/29kcd9/hellfire_amulets_detailed_guide_to_crafting, preferably in a new profile.

Observe that the cloud in the header is animating.

2. Open a terminal window and type the following command:

sudo powermetrics -W -s tasks |egrep -e firefox -e '^Name' -e 'Sampled system activity'

Leave this command running.

3. Observe the high number of wakeups.  On my machine, several hundred is normal, up to 1000+, depending on factors that I am currently ignorant of.

4. Open the Web Developer Inspector, and select the div containing the animating cloud.  It's called "header-bottom-left" here, a child of "header".  Mousing over the elements of the page should direct you to it fairly easily.

5. The Inspector has a little area in the bottom right of your window for displaying the CSS rules for the selected element.  Find the CSS rule for the animation, currently on the ::after element.

6. Click the little checkbox next to the animation to disable it from running.

7. Watch as the wakeups for firefox according to powermetrics drop to almost nothing (<10 on my machine).  If you had Activity Monitor open, you can observe the impact that flipping the animation off and on has on Energy Impact, too.

For comparison purposes, Safari can run this same page with the animation at about 50 wakeups.  I don't know what we're doing, but we can clearly be doing something better.

I don't know exactly where this goes; some sort of interaction between layout, graphics, and imagelib (?).  Jet, please refile and/or ask appropriate people about this.
Flags: needinfo?(bugs)
What CSS properties were being animated in the animation?
(In particular, if it's properties that Safari can run on the compositor, then turning on OMT Animations on desktop might make a big difference here, assuming it's also something that we can run on the compositor.  If there's a big difference between main-thread-animation power use between Safari and Gecko, then that's a different can of worms.)
(In reply to David Baron [:dbaron] (UTC-8) (needinfo? for questions) from comment #1)
> What CSS properties were being animated in the animation?

I'm not entirely sure.  The @keyframes rules for the animation are only touching background-position; would there be others to look for as well?
Flags: needinfo?(dbaron)
mstange says this is all background-position.  He's not sure where all the wakeups are coming from either.
Flags: needinfo?(dbaron)
Do we have tools for debugging the cause of individual wakeups?
(In reply to David Baron [:dbaron] (UTC-8) (needinfo? for questions) from comment #5)
> Do we have tools for debugging the cause of individual wakeups?

I don't know yet.  I am going to poke at dtrace on Mac to see if that can tell me when the wakeups are.  CPU usage on my Mac is high enough that a good profiler *might* be helpful.
Flags: needinfo?(bugs)
Whiteboard: [Power]
Summary: CSS animations cause many wakeups → CSS animations cause many wakeups in Diablo sub-reddit
Whiteboard: [Power] → [Power:P2]
A user posted recently complaining about a similar page causing heavy CPU usage:
https://www.reddit.com/r/Diablo/comments/3rg8jb/meta_rdiablo_in_firefox_on_os_x_using_100_cpu/
You need to log in before you can comment on or make changes to this bug.