Question

Let me start off by apologizing for not giving a code snippet. The project I’m working on is proprietary and I’m afraid I can’t show exactly what I’m working on. However, I’ll do my best to be descriptive.

Here’s a breakdown of what goes on in my application:

1. User clicks a button
2. Server retrieves a list of images in the form of a data-table
3. Each row in the table contains 8 data-cells that in turn each contain one hyperlink
   • Each request by the user can contain up to 50 rows (I can change this number if need be)
   • That means the table contains upwards of 800 individual DOM elements
   • My analysis shows that jQuery("#dataTable").empty() and jQuery("#dataTable).replaceWith(tableCloneObject) take up 97% of my overall processing time and take on average 4 – 6 seconds to complete.

I’m looking for a way to speed up either of the above mentioned jQuery functions when dealing with massive DOM elements that need to be removed / replaced. I hope my explanation helps.

Answer 1

jQuery empty() is taking a long time on your table because it does a truly monumental amount of work with the contents of the emptied element in the interest of preventing memory leaks. If you can live with that risk, you can skip the logic involved and just do the part that gets rid of the table contents like so:

    while ( table.firstChild )
        table.removeChild( table.firstChild );

or

    table.children().remove();