javascript - Prevent browser from becoming non-responsive during reflow -

i'm using javascript function add large nested tables site. i've managed optimize javascript runs quite quickly, browser tends hang during reflows (often 5-10 seconds), it's not uncommon 50 mb of html added in each go. there single reflow event, preferable remove non-responsive period.

is possible have reflow events run in background, or simpler have child tables default display: none , have button display them?

code posted necessary.

ajax request:

function getresult(command,server) {          var xmlhttp=new xmlhttprequest();         xmlhttp.open("post",basecommand.concat(server).concat(basepath).concat(command),false);         xmlhttp.send(null);         result=json.parse(xmlhttp.responsetext);         return result; } 

code used build site:

function buildtabs() {         var tabsstring="";         //formatting , such here         (var in commands) {             tabsstring=tabsstring.concat(buildtab(commands[i]));         }         //a bit more formatting         document.getelementbyid('tabstable').innerhtml=tabsstring;     } 

seems using kind of pattern:

var container = document.getelementbyid('container_id'); // container existing , visible dom node holds tables var result = getresult(command, server); var table = document.createelement('table'); container.appendchild(table); // here comes big nested for-loop // fills table results ajax call 

this way force browser recalculate cell sizes , redraw table each time add new row. hurts browser.

instead fill table while it's not yet attached document. way calculations , redraw done once. correct pattern this:

var container = document.getelementbyid('container_id'); // container existing , visible dom node holds tables var result = getresult(command, server); var table = document.createelement('table'); // here comes big nested for-loop // fills table results ajax call container.appendchild(table); 

edit: while above still true, real problem wrong way of modifying dom tree. don't build huge html string , assign innerhtml attribute of element. use dom manipulation methods.

example:

function buildtabs(nested_array){     var table = document.createelement('table');     // use css classes formatting - not inline styles     table.addclass('my_table_class');     var tbody = document.createelement('tbody');     (var in nested_array){         var row = nested_array[i];         var tr = document.createelement('tr');         (var j in row){             var cell = row[j];             td = document.createelement('td');             text_node = document.createtextnode(cell);             td.appendchild(text_node);             tr.appendchild(td);         }         tbody.appendchild(tr);     }     table.appendchild(tbody);     document.getelementbyid('tabstable').appendchild(table); }