I am looking for an IE 6 / 7 plug-in or something like Firebug_Lite thing that can show the memory usage in runtime, as well as the allocation of memory of each object or variable. Anyone know what tool has this functionality? Thanks.
You could try Drip for memory leaks but in my experience that's pretty much it for IE. Let's wait for better responses :)
Well. i found out there is a tool called Javascript Memory Validator. BUt it is expensive and seems like only work for Firefox. And it is hard to use.
Still looking for a good IE tool for checking the javascript performance & memory allocation.
Related
In Chrome there's a non-standard API called performance.memory, which helps to know the current usage and limit of the Heap JS Memory, but in Firefox and Safari that's not possible. Do you know another way to find or calculate those values?
Thank you so much!
I can't try to make my code cleaner, I'm just avoiding to make some calculations if the current memory heap is so high.
Are there any add-ons for Firefox that I can use to find out with part of the JavaScript causes memory leaks?
I've got nothing for firefox, but the webkit inspector in Chrome has a profiler built in that is great for that kind of thing.
As an added bonus it also shows you all browser events such as repaints, so you can engineer your code to have the least impact on the browser.
Use Drip.exe / IEleak, I used it a lot to search for memory leaks!
Other hits:
jQuery itself prevents a lot of memory leaks!
Test your code with http://jslint.com
There is a tool by Microsoft itself, but I don't know it is up to date: http://blogs.msdn.com/b/askie/archive/2008/12/31/javascript-memory-leak-detector-for-internet-explorer.aspx
There is also integration with Visual Studio: http://berniesumption.com/software/how-to-debug-javascript-in-internet-explorer/
There is a good article about mem leaks http://www.ibm.com/developerworks/web/library/wa-memleak/
http://www.debugbar.com/?langage=en
The best memory profiler I've found is for IE (supports even IE6 ;-). Give it a go - you will be surprised how good it is:
http://ajax.dynatrace.com/ajax/en/
Please tell me how to find out the memory leak in browser and what is the best way to solve the problem. Is there any guideline for writing javascript to avoid memory leak?
And also if you can tell me some problem which you experienced related to memory leak and how did you debug and find out the solution would provide a great understanding to me.
Thanks
Look at this IBM article on Memory leak patterns in JavaScript
For Internet Explorer you can try sIEve or the JavaScript Memory Leak Detector from Microsoft (The link to the documentation seems to be broken). In Firefox there is the Leak Monitor Add-on. There is also a list of tools for Firefox here.
UPDATE:
There is a new version of the Microsoft memory leak detector at the link below.
Link
Our team is faced with slow but serious Javascript memory leak. We have read up on the normal causes for memory leaks in Javascript (eg. closures and circular references).
We tried to avoid those pitfalls in the code but it likely we still have unknown mistakes left.
I started my search for available tools but would like input from people with actual experience with these tools.
Some of the tools I found so far (but have no idea how good and useful they would be for our problem):
Sieve
Drip
JavaScript Memory Leak Detector
Our search is not limited to free tools, it will be a bonus, but more importantly something that will get the job done.
We do the following in our Javascript code:
AJAX calls to a .NET WCF back-end that send back JSON data
Manipulate the DOM
Keep a fairly sized object model in the Javascript to store current state
sIEve is for memory leaks in IE specifically. What I like about it is that you can reliably reproduce the steps used and capture action-able data. See the following:
How to use IE7 Javascript memory leak detectors?
Another tool for you: JavaScript Memory Validator.
Shows allocations, objects, hotspots, generations, snapshots, etc.
Works with Firefox 1.0 through 3.6.
I have used the JavaScript Memory Leak Detector and I can tell you it works great.
What dynamic engine are you using? Based on the mention of a .Net web service, I'm guessing that you are using ASP.Net. Is that correct? You may want to look at the ASP.Net AJAX JavaScript library. It was built in a way that helps this situation. All components have a dispose() method that allows you to remove references to DOM objects. When I switched to ASP.Net AJAX, my page became much more responsive.
This question already has answers here:
Closed 10 years ago.
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?
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.
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.
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.
Google Chrome also has profile options
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.
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.
Firebug or Google's Page Speed for Firefox have profiling tools.
This post by John Resig (jQuery) may be helpful for detecting memory leaks in IE:
http://ejohn.org/blog/deep-tracing-of-internet-explorer/