Menu
Possible Duplicate:
What is the best way to profile javascript execution?
I have a few scripts that use jQuery, and I think I have a memory leak in one of them.
How one could profile and find what parts of the scripts that I have are using the most memory/CPU?
935
A JS profiler is an efficient tool to help you understand your code better – effectively finding, pinpointing and optimizing bottlenecks in your code. They're simple to run once you get used to the interface and it's likely you even have one built into your browser.
In JavaScript performance. now() method can be used to check the performance of your code. You can check the execution time of your code using this method. It returns the value of time (of type double) in milliseconds. The returned value represents the time elapsed since the execution started.
You’ll find Chrome’s JS profiler under More Tools>More Developer Tools . You can also access it through the keypad shortcut Ctrl+Shift+I. Once you’ve opened this in-browser pop-up, navigate to Performance in the tabs. It was helpful of Google to integrate a JS profiler into your browser – it means you can profile and optimize your code on the go.
If you are looking for higher level information about the site’s performance you can also call performance.toJSON (). For auditing specific JavaScript functions, the most basic tool is performance.now () which we described above. The problem with now is that it’s a bit difficult to manage if you have many measurements.
There are a number of JavaScript profilers you can use to analyse and optimize your code. The easiest one to get started with is Google’s own profiler, which is integrated with Chrome.. You’ll find Chrome’s JS profiler under More Tools>More Developer Tools . You can also access it through the keypad shortcut Ctrl+Shift+I.
Open the chrome browser with any website. Hit F12 OR right click on the screen and select “inspect element” In the dev tools screen that opens, select the “Performance” tab (1 in Figure 1) Click the “record” button (2 in the Figure 1) Now the app is being recorded.
Regarding memory consumption
Memory leaks in JavaScript are usually ignored except when they turn into browser memory leaks (that is, even after the user navigates away from the page, the memory continues allocated and there's no way to free it). The reason for this is that while your web application may have some memory leaks, users will go from one page into another so the leaks are minimized. However they may not restart the browser, so browser memory leaks may be serious. Some JavaScript code is known to cause memory leaks on certain browsers, being Internet Explorer probably the worst in this area. For it you may find Microsoft JavaScript Memory Leak Detector to be very useful.
Regarding times
IE, Chrome and Safari have built in profilers in the web development tools that ship with the browser. For Firefox you may use Firebug. Also useful may be, since you're using jQuery which means your profiling report will be filled with anonymous functions and alike, making it quite unreadable, John Resig's jQuery profiling plugin, which will give you a clearer output on the matter.
50
Use Firebug. To quote from http://getfirebug.com/js.html:
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
20
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
