How can I optimize the performance of a jQuery DOM manipulation script that is causing slowdowns on large datasets? [closed]

Question

• Are there any other optimization techniques or best practices I can apply to improve the performance of this script?

Code snippet:

// Simplified example
$('#table-body').empty();
data.forEach(function(row) {
  $('#table-body').append('<tr>...</tr>');
});

• I'm using jQuery 3.6 to dynamically update a table with thousands of rows based on user input.
• The script uses .append() and .remove() methods to update the table contents.
• However, with large datasets, the script takes several seconds to execute, causing a noticeable delay.
• I've tried using .detach() and .empty() instead, but the performance improvement is minimal.

Answer 1

Each append will modify the DOM, which is inefficient

Try this - I assume the data can be trusted and has been sanitized

$('#table-body').html(
  data.map((row) => `<tr><td>${row.somevalue}</td></tr>`).join('')
);

In plain JS

document.getElementById('table-body').innerHTML = data
  .map((row) => `<tr><td>${row.somevalue}</td></tr>`).join('');