Question

Been working on an App and since it’s getting a bit too big I’ve thinking of ways to improve memory management since the app runs mostly on Javascipt. So every time a navigation item is clicked I would call the jquery empty then show the html via ajax. ex:

//$.ajaxSetup(); called before this
//$this is the attached element 
$.ajax({success:function(data){
    $this.empty().html(data.output).fadeIn(400);
    //more javascript stuff like loading tinymce or jquery ui
}});

is this enough to prevent memory leaks? I’m not entirely sure what empty does but I’m assuming it removes all DOM elements within that div along with any other objects and events? btw. You can find the app here http://webproposalgenerator.com/ and http://webproposalgenerator.com/demo.

any tips on improving the performance/security or any feedback at all would be greatly appreciated.

Answer 1

$.fn.empty should be enough, it deletes all data and events associated to the elements and then deletes the elements. It also calls .widget("destroy") on all jquery-ui widget.js based widgets that are defined on those elements.

It is also important to note that jquery’s $.fn.html method calls $.fn.empty() on the given element before appending html, therefore, if you are using $.fn.html, you don’t have to call $.fn.empty