Speeding up jQuery empty() or replaceWith() Functions When Dealing with Large DOM Elements
- by Levi Hackwith
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:
User clicks a button
Server retrieves a list of images in the form of a data-table
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.
