Single Page Application - Large DOM - SLOW

Ok so I have reworked my code so that when a tab is closed, all widgets are destroyed, all handlers created by .on() are removed with .off() and the containing DIV is emptied with .empty(). This has DRAMATICALLY improved the performance alone.

jQuery will do the looping for you for just the direct children:

$("#div1").children().off();
$("#div1").children().empty();
$("#div1").off();
$("#div1").empty();

Or if you want all descendants:

$("#div1").find('*').off();
$("#div1").find('*').empty();
$("#div1").off();
$("#div1").empty();

Or simply:

$('#div1').remove();

Note: similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

Reference:

http://stackoverflow.com/questions/18907584/single-page-application-large-dom-slow
http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
http://stackoverflow.com/questions/13945025/jquery-remove-all-event-handlers-inside-element
https://api.jquery.com/remove/