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.
Click F12, Go to profiles, click on start. Reload page.
Wait untill your page reloaded, and click stop.
Click on your profile and see result (Y)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With