Speeding up jQuery empty() or replaceWith() Functions When Dealing with Large DOM Elements

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.

-------------Problems Reply------------

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 );



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

The largest speed gain I found was to remove the parent element I was working with from the DOM, performing my changes to it, then reinserting it back into the DOM (in my case the tbody).

Here you can see the two relevant lines of code which gave me huge performance increases (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.cells = this._update_cells();

Do you have to repopulate all at once, or can you do it by chunks on a setTimeout()? I realize it'll probably take even longer in chunks, but it's worth a lot for the user to see something happening rather than an apparent lockup.

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

Category:javascript Views:0 Time:2009-06-12

Related post

  • jQuery empty and html functions 2011-06-12

    Hi I'm doing a validation on my server side and I return a JSON object with validation errors. Then the simple jQuery function writes the errors in a corresponding div : function processEmail(data) { $("#newEmailError").html(data.newEmail); $("#newEm

  • Jquery AutoComplete: How to populate source array using a DOM Element? 2011-11-25

    This is the standard Jquery Autocomplete code. <script> $(function() { var availableTags = [ "JavaScript", "C#", "VB.NET", "ASP.NET" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> Let's say I'm able to fill an HTML

  • jQuery UI draggable is not working on newly created DOM element 2012-03-21

    I have some DOM element which is draggable using jQuery UI.All are working fine but when i create some element using jQuery , then they are not draggable at all. i.e $('div.draggable').draggable(); //Existing element , it works :) $('p.draggable').dr

  • how jQuery $.data() method differs from directly attaching variables to DOM elements? 2011-06-05

    I can do this: $('#someid').data('dataIdentifier', 'someVariable'); And in my understanding I can do this: document.getElementById('someid').dataIdentifier = someVariable; What are the pros of using jQuery for this versus raw javascript? Thanks! ----

  • Setting jquery.animate CSS properties to values stored in the DOM element using $(this).data 2011-09-18

    #me { background-color: blue; color: white; width:150px; padding: 5px; position: relative; } <div id='me'>Here we go</div> OK, I'm trying to set CSS properties of the $.animate method to values stored in the DOM element using the $.data m

  • How would I prevent JQuery from selecting more than 1 level of children dom elements? 2012-03-21

    How would I only select Item A and Item B pragmatically while excluding the sub item? <div id="nav"> <ul> <li> <p>Item A</p> <ul> <li> <p>Sub Item A</p> </li> </ul> </li> <li

  • In jQuery, how do you add markup above your selected DOM element? 2010-08-09

    If i have: <div id="test"></div> How do I select the test div and then add <div id="pre-test"> before the test div so it looks like this: <div id="pre-test"><div id="test"></div> Thanks guys --------------Solutions

  • How can i store a bunch of jquery commands in a function that i can call with click event 2009-09-13

    Currently i have this: $(".splitCol").click(function () { $.cookie('whichColumn', 'split'); $(".threeCol .active").removeClass("active"); $(".leftCol .active").removeClass("active"); $(".splitCol span").addClass("active"); $(".threeColumns li:eq(3)")

  • jQuery attach function to 'load' event of an element 2009-11-17

    I want to attach a function to a jQuery element that fires whenever the element is added to the page. I've tried the following, but it didn't work: var el = jQuery('<h1>HI HI HI</H1>'); el.one('load', function(e) { window.alert('loaded');

  • Modfying DOM elements involved in a jQuery function 2011-07-10

    Specifically, drag and drop using jQuery. $(".note").droppable({ drop: function () { } }); How do I get the DOM element that: 1) Is being dragged/dropped? 2) Is being dropped onto? Follow up question: Any suggestions on how I could have answered this

  • Jquery/Javascript target in function 2011-07-10

    I have a function that I am calling with two images like so. $('#image1').bind('click',doNext); $('#image2').bind('click',doNext); I need to be able to tell which one called the function. function doNext(){ if(target == $('#image1'){ alert('image1');

  • Associating data to a DOM element for jQuery 2008-12-12

    In a previous life, I might have done something like this: <a href="#" onclick="f(311);return false;">Click</a><br/> <a href="#" onclick="f(412);return false;">Click</a><br/> <a href="#" onclick="f(583);return f

  • jquery Syncing dom element values 2010-08-19

    I have a DOM element like this: <div id='master-value'>Apples</div> I have many other elements elsewhere on the page that I need to sync with the 'master-value'. <div class='fruit-value' data-reference='master-value'>Apples</div

  • jquery: test whether input variable is dom element 2011-02-17

    I would like to write a jquery function that accepts either a dom element or its id as input: function myfunction(myinput){ // pseudocode: // if (myinput is dom element){ // var myID = $(myinput).attr('id'); // } else { // var myID = myinput; // } //

  • does jquery plugin deleted when DOM element removes 2011-06-24

    Simple plugin: (function ($) { var MyTest = function (){ this.bigarr = new Array(20000); this.init(); }; $.fn.extend({ mytest: function(options){ return this.each(function() { new MyTest(); }); } }); $.extend(MyTest.prototype, { init: function(){ con

  • Creating DOM elements in jQuery 2011-08-01

    Let's say we have the following JavaScript/jQuery code below function createElement(i, value) { return $('<div>', { id: "field" + i, text: value}); } I have a div with an id of "container" and then I do: var c=$("container"); c.append(createEle

  • jQuery object and DOM element 2011-08-07

    I would like to understand relationship between jQuery object and DOM element.. When jQuery returns an element it shows up as [object Object] in an alert. When getElementByID returns an element it shows up as [object HTMLDivElement]. What does that m

  • Create a DOM element with jQuery 2012-04-13

    I created a input element with jQuery like that: var element = $('<input />', { name: name1, id: id1, type: 'text' }); And I want to return the DOM element associated with it. However, element is not a DOM (yet). How can I transform it to DOM e

  • jQuery with uncomplete DOM elements 2011-04-06

    My problem is related to jQuery and the DOM elements. I need a template like the following: var threadreply = " <li class='replyItem'>" + " <div class='clearfix'>" + " ${tittle}" + " </div>" + " </li>" ; $.template( "threadrep

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.229 (s). 11 q(s)