Open Bug 1704734 Opened 2 years ago Updated 2 years ago

[meta] Inspector Animation panel causes a high CPU load

Categories

(DevTools :: Inspector: Animations, task)

Product:
DevTools
Component:
Inspector: Animations
Type:
task

Tracking

(Not tracked)

People

(Reporter: jdescottes, Unassigned)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

(Keywords: meta)

Tracking various performance issues related to the animation inspector.

Let's keep it to one bug per fix, and have the discussion in the meta.

Initial STRs:

(In reply to Henrik Skupin (:whimboo) [⌚️UTC+1] from comment #0)

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0 ID:20210312033752

Especially with a lot of animations listed on that panel the DevTools panel is using a lot of CPU for just updating / rendering the internal animations and timer output. Most of it goes into the main thread of the parent process.

Steps:

  1. Open https://www.esprit.de/herrenmode/bekleidung/pullover-strickjacken
  2. Open DevTools and select the inspector pane
  3. Select the Animations panel

Here a recorded profile: https://share.firefox.dev/3eOmphG

Also there are massive memory allocations that quickly increases the memory of the parent process, and which doesn't seem to get freed (didn't test long enough). So maybe this also contributes to the high CPU load.

Daisuke also provided test pages with either many animations or a single animation

Two fixes already landed:

  • Bug 1699040 added a virtual viewport for the animation inspector
  • Bug 1699039 stopped using react to render high frequency components
Depends on: 1699040

Thank you for filing this, Julian!

You need to log in before you can comment on or make changes to this bug.