Possible To Add Large Amount Of DOM Nodes Without Browser Choking?

I have a webpage on my site that displays a table, reloads the XML source data every 10 seconds (with an XmlHttpRequest), and then updates the table to show the user any additions

Solution 1:

100 <tr>'s isn't really that much... are you still using that framework's new Element()? That might be the cause of it.

You should test the speed of new Element() vs document.createElement() vs .innerHTML

Also try building the dom tree "in memory" then append it to the document at the end.

Finally watch that you're not looking at .length too often, or other bits and bobs like that.

Solution 2:

I have experienced similar problems at round 3000 table rows of complex data, so there is something not entirely right with your code. How is it running in firefox ? Can you check in several different browsers.

Are you binding to onPropertyChange anywhere ? This is a really dangerous ie event that has caused me severe ie-specific headaches earlier. Are you using CSS selectors anywhere ? These are notoriously slow on ie.

Solution 3:

You could cloneNode(false) the element to be repeated, and then use that for the loop, instead of generating the element each time.

Solution 4:

Avoid using one large for loop to render all the data in one big step. Look at breaking up the data into smaller chunks instead.

Render each smaller chunk with a while loop. After that chunk is done, call the next chunk with setTimeout [time 1ms] to give the browser a "breather".

You can avoid using the while loop altogether and just use a setTimeout.

Using the setTimeout technique will slow down the execution speed a bit, but you should not get the warning message.

Another thing to look at is to not append each element individually to the document. Look into creating a new tbody, appending the new rows to the new tbody, and append the tbody to the table.

There are a lot of other things that can cause a slow application. It can be fun to flush them all out.

There is a neat study of the warning here: http://ajaxian.com/archives/what-causes-the-long-running-script-warning.