Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Profile specific animation CPU

The situation & problem
I have multiple animations (css and javascript/jQuery) in my site and sometimes it makes my site stutter.

My question
How can I see how much cpu a specific animation (both CSS, JavaScript and jQuery) uses in runtime and execution time

I know how I can see the entire site CPU usage but not for a specific animation.

like image 722
Nick Avatar asked Dec 16 '14 09:12

Nick


Video Answer


2 Answers

Click F12, Go to profiles, click on start. Reload page.

enter image description here

Wait untill your page reloaded, and click stop.

Click on your profile and see result (Y)

enter image description here

like image 147
Thijs Kempers Avatar answered Sep 20 '22 12:09

Thijs Kempers


Maybe you could you console.profile() with Firefox. http://www.stoimen.com/blog/2010/02/02/profiling-javascript-with-firebug-console-profile-console-time/

Put console.profile() before the function you want to measure and console.profileEnd() after the method.

<html>   <body>     <script>       myFunc = function() {         var a = [];       }                     console.profile();       myFunc();       console.profileEnd();     </script>   </body> </html> 

https://developer.chrome.com/devtools/docs/console-api Here you find some more methods for debugging.

Edit: I've just found another site with useful information for the firebug extension: https://getfirebug.com/wiki/index.php/Console.profile

like image 35
Wouter den Ouden Avatar answered Sep 21 '22 12:09

Wouter den Ouden