27

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Eli
  • 2,666
  • 7
  • 33
  • 37

8 Answers8

20

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.

Miguel Ventura
  • 10,344
  • 2
  • 31
  • 41
  • Thanks a lot, I will try the memory leak detector for IE. P.S., the link in Ajaxian is no longer working, here's the working link: http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector_v2.aspx – Eli Jan 28 '10 at 15:51
  • 1
    John Resig's link to the script no longer works. – drewish Oct 15 '12 at 19:57
  • The assumption may not always hold. Some pages will be kept open for a long time, for example GMail or Facebook, and JavaScript code with memory leaks in them will show up quickly. – MauganRa Oct 19 '12 at 20:27
10

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.

msanders
  • 5,739
  • 1
  • 29
  • 30
4

I would suggest taking a look at the profiler in Firebug, and the Drip plugin for IE to help look for memory leaks.

Also, just keep in mind that most javascript memory leaks come from circular references between DOM objects and javascript objects not being broken when the DOM object is unloaded. To prevent that, I would suggest avoiding creating references to javascript objects in DOM object properties (ie, avoid something like document.getElementById('foo').bar = myObject;). If you must create these circular references, be sure to break them yourself in a function that runs when the page unloads, or when removing the DOM objects prior to unload.

pkaeding
  • 36,513
  • 30
  • 103
  • 141
2

Google Chrome also has profile options

sth
  • 222,467
  • 53
  • 283
  • 367
Vestel
  • 1,005
  • 1
  • 11
  • 25
1

Though chrome has profiling options inbuilt it does not give precise information about the object.So i prefer using leak-finder-for-javascript tool which helped me in my code.

https://code.google.com/p/leak-finder-for-javascript/

I hope this helps.

sid
  • 11
  • 2
1

Another simple way to test a specific piece of code is to add a timer around it.

var testStart = new Date();

// code to be tested here

$('#jstest').html("selected function: "+ (new Date() - testStart) + " milliseconds");

Where jstest is a span element somewhere visible on your page.

macca1
  • 9,541
  • 9
  • 32
  • 41
0

Firebug or Google's Page Speed for Firefox have profiling tools.

Eimantas
  • 48,927
  • 17
  • 132
  • 168
0

This post by John Resig (jQuery) may be helpful for detecting memory leaks in IE:

http://ejohn.org/blog/deep-tracing-of-internet-explorer/

David Murdoch
  • 87,823
  • 39
  • 148
  • 191