How to destroy a javascript object?

Question

Recently, I came across one of my applications, which consumes too much memory and increases by 10 MB / s.

So, I like to know the best way to destroy a JavaScript object and variables so that memory consumption stays in place and my FF cannot be destroyed.

I call my two JavaScripts every 8 seconds without reloading the page.

function refresh() { $('#table_info').remove(); $('#table').hide(); if (refreshTimer) { clearTimeout(refreshTimer); refreshTimer = null ; } document.getElementById('refresh_topology').disabled=true; $('<div id="preload_xml"></div>').html('<img src="pic/dataload.gif" alt="loading data" /><h3>Loading Data...</h3>').prependTo($("#td_123")); $("#topo").hide(); $('#root').remove(); show_topology(); } 

How can I see which variable is causing memory overhead and a method to stop this process from running?

Answer 1

You can put all your code under one namespace as follows:

 var namespace = {}; namespace.someClassObj = {}; delete namespace.someClassObj; 

using the delete keyword will delete the property reference, but at a lower level, more information will be displayed in javascript GC about which objects will be fixed.

you can also use chrome to get the memory profile of your application, and which objects in your application should be reduced.

Answer 2

You cannot delete objects, they are deleted when there are no more links to them. You can delete links with delete .

However, if you created circular links in your objects, you may need to undo some actions.

Answer 3

While the existing answers gave solutions to solve the problem, and in the second half of the question they do not answer the question about self-detection of the first half of the question, which is in bold: "How can I see which variable is the reason Overhead of memory ...? "

It might not have been so cool 3 years ago, but now the Chrome Devevloper Tools Profiles section has become quite powerful and feature rich. The chrome team has an insightful article on how to use it and therefore, just like garbage collection (GC) works in javascript, which underlies this question.

Since delete is basically the root of Yohai Akoki's currently accepted answer, it is important to remember what deletion does. It does not matter if you do not combine with the concepts of how the GC works in the following two answers: if an existing object reference exists, it is not cleared. The answers are more correct, but probably not so rated, because they require more attention than just writing "delete." Yes, one of the possible solutions could be to use delete, but it doesn't matter if there is another link to a memory leak.

delicateLatticeworkFever appropriately mentions circular references, and the chrome command documentation can provide much greater clarity, as well as tools for checking the cause.

Since deletion was mentioned here, it may also be useful to provide an Understanding Delete resource. but it does NOT get into any actual solution that is really related to js GC.

Answer 4

Structure your code so that all your temporary objects are inside closures instead of the global properties of the namespace / global objects and go beyond when you worked with them. GC takes care of the rest.

Answer 5

I had such a problem, and I had the idea of ​​just changing the innerHTML of the problematic child objects.

 adiv.innerHTML = "<div...> the original html that js uses </div>"; 

It seems dirty, but it saved my life as it works!