AJAX based application memory leak?

I'm making a mobile app using Phone Gap (HTML, CSS and JavaScript/jQuery). The application is a mobile interface to a larger website, and it uses AJAX to load web pages and display them.

My application loads pages as follows:

The HTML in question looks like this:

<div class="content">


</div>

And my snippet of java code that displays the content:

if (xmlHttp.readyState==4 && xmlHttp.status==200) {
            document.getElementById("content").innerHTML  = "";
            var obj = JSON.parse(xmlHttp.responseText);
            document.getElementById("content").innerHTML = obj["data"];
        }   

Basically, the response contains JSON data with HTML to be displayed in the <div> element previously mentioned by setting it's innerHTML.

However after loading a few pages, the app crashed on my Android device. Since it seemed to slowly get less responsive between pages (AJAX pages), I figured it was some sort of memory leak. I examined the web application in chrome, took memory profiles and found that the memory footprint was increasing between pages. I'm not an expert on the Chrome Developer Tools, but something that caught my eye were these "Detached DOM Tree" that appeared after loading the second page which indicates that the first page's DOM elements weren't freed from memory when the new AJAX page was loaded.

What would cause these DOM elements to not be freed properly? Is innerHTML = ""; not the proper way to clear all of DOM elements from another element?

I would prefer to keep my application pure AJAX, but if I have to physically switch pages for it to clear all the memory properly, then I guess I don't have a choice.

Answers


As far as I know, if something still references objects, like DOM objects, the GC won't collect them. This goes for elements, even if they are removed from the DOM. Check your code for these.

Also:

  • Shouldn't you be caching document.getElementById("content")? Calling them over and over will not change it's value. Store it in a variable instead.

  • And innerHTML should replace all the element's contents. No need to clear it before putting stuff.

  • If this is debugging the return, shouldn't you be logging it into console or something?

Like this:

var content = document.getElementById("content");
...
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  var obj = JSON.parse(xmlHttp.responseText);
  content.innerHTML = obj["data"];
}  

Need Your Help

Writing to SQLite tables with variable names (Python)

python database sqlite dataframes

I'm trying to write five variables to tables in a database using SQLite and Python. Below is my code and the error I'm getting:

JTextField getText() is stuck after init()

java swing gettext jtextfield japplet

This used to be homework but now it's personal as the term is over and I'm still working on learning Swing components. This program is my attempt to lift a procedural console TicTacToe implementation

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.