Speeding up jQuery empty () or replaceWith () functions when working with large DOM elements

Question

Let me start by apologizing for the lack of code. The project I'm working on is the property, and I'm afraid that I can’t show exactly what I'm working on. However, I will do my best to describe.

Here is a breakdown of what is happening in my application:

• User presses a button
• The server receives a list of images in the form of a data table
• Each row in the table contains 8 data cells, each of which contains one hyperlink
  • Each user request can contain up to 50 lines (if necessary, I can change this number)
  • This means that the table contains more than 800 individual DOM elements.
  • My analysis shows that jQuery("#dataTable").empty() and jQuery("#dataTable).replaceWith(tableCloneObject) take 97% of the total processing time and take an average of 4-6 seconds to complete.

I am looking for a way to speed up any of the above jQuery functions when dealing with massive DOM elements that need to be removed / replaced. Hope my explanation helps.

Answer 1

jQuery empty() takes a lot of time on your table because it is really a monumental amount of work with the contents of the emptied element in the interest of preventing memory leaks. If you can live with this risk, you can skip this logic and just do the part that will get rid of the contents of the table as follows:

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

or

  table.children().remove(); 

Answer 2

Recently, I had very large data tables that would consume from 15 seconds to a minute of processing when making changes due to all the DOM manipulations being performed. I got it up to 1 second in all browsers, but IE (it takes 5-10 seconds in IE8).

The biggest gain I found was to remove the parent I was working with from the DOM by making my changes and then reinserting it back into the DOM (in my case tbody ).

Here you can see two corresponding lines of code that gave me a huge performance boost (using Mootools, but can be ported to jQuery).

 update_table : function(rows) { var self = this; this.body = this.body.dispose(); //<------REMOVED HERE rows.each(function(row) { var active = row.retrieve('active'); self.options.data_classes.each(function(hide, name) { if (row.retrieve(name) == true && hide == true) { active = false; } }); row.setStyle('display', (active ? '' : 'none')); row.store('active', active); row.inject(self.body); //<--------CHANGES TO TBODY DONE HERE }) this.body.inject(this.table); //<-----RE-INSERTED HERE this.rows = rows; this.zebra(); this.cells = this._update_cells(); this.fireEvent('update'); }, 

Answer 3

Do you need to refill everything all at once, or can you make it chunks on setTimeout ()? I understand that this is likely to take even more time in pieces, but it is worth it so that the user can see something happening, rather than explicit blocking.

Answer 4

What worked for me is $("#myTable").detach() . I had to clear a table that has 1000 rows. I tried $("#myTable").children().remove() . This was an improvement over $("myTable").empty() , but still very slow. $("#myTable").detach() takes 1 second or less. Works great in FF and Chrome. IE is still slow.