2

Situation:
I have a website with multiple jQuery, Javascript and CSS animations. These animations make my site slow and stutter at times.

Question:
How can I see the cpu and gpu usage per specific animation within my website? I know how to see the entire usage of the website but not of an singular animation.

What have I tried?

  • Google Dev Tools
  • Firefox Dev Tools
  • Console.profile / Console.profileend
Mike Lammers
  • 542
  • 9
  • 27
  • There are no browser-based tools to monitor the CPU usage of JS/CSS. Mostly because good, well optimised code should never come close to reaching a CPU bottleneck. All you can really do is use is the performance tab of Task Manager – Rory McCrossan Feb 22 '16 at 10:06
  • There is a Task Manager dedicated in Chrome for CPU usage and JS Memory – GibboK Feb 22 '16 at 10:36

1 Answers1

0

There are several tools in Chrome Dev which could help you out. When analysis animation you should look at the information for a specific frame, or range of frame.

I would suggest starting from this document:

https://developer.chrome.com/devtools/docs/timeline

Consider evaluating:

  • Frames mode, which shows your page's rendering performance.
  • Analyzing Timeline recordings

In Firefox you can use the frame-rate value as an indicator of bottlenecks, specially for animation related issues, you can read more about these tools here:

https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate

You can also see how much GPU time was spent compositing each frame diving in the build-in profile in Firefox:, more information can be found here:

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

GibboK
  • 71,848
  • 143
  • 435
  • 658
  • 1
    You can see the level of CPU and memory usage for you entire application selecting "Task Manager" from `Chrome/More Tools` or `Shift + Esc` (but probably you know already that). – GibboK Feb 22 '16 at 10:50