Time taken by for loop in javascript increases exponentially with increase in number of iterations

Question

I am using this for loop in some code. This code appends all the elements present in "left array" in a table and assigns a unique rowID to them which is working perfectly fine.

Problem is: This loop takes around 9 seconds to execute when length of "left" array is 5000,but when length of "left" array is 10000 and 15000, it takes 27 seconds and 54 seconds respectively. I guess this is an ambiguous behavior, the time should increase linearly with increase in number of iterations. I would be glad if someone could tell me the reason and the solution to this problem.

Thanks in advance. :)

$("body").append('<p id = "p1">table1</p>')
table = $('<table id="first-table">');
div = $('<div ></div>');
$(div).append(table);
$('body').append(div);

for (var rowID = 0, l = left.length; rowID < l; rowID++) {

    if (left[rowID] != null) {
        var tr = $('<tr>');
        table.append(tr);
        tr.append('<td class="cell" id="a' + rowID + '">' + left[rowID] + '</td>');
    }
}

Answer 1

Appending N elements individually causes up to N reflow's. As the no of elements to be added increases it decreases performance.

You can refactor your code, create the DOM fragment and nodes in memory then use single append()

//Createing Nodes in memory
var table = $('<table id="first-table">');
for (var rowID = 0, l = left.length; rowID < l; rowID++) {
    if (left[rowID] != null) {
        $('<tr>').append('<td class="cell" id="a' + rowID + '">' + left[rowID] + '</td>')
                 .appendTo(table);
    }
}

var div = $('<div ></div>').append(table);
var paragraph = $('<p id = "p1">table1</p>');

//Append to DOM     
$("body").append(paragraph.add(div))

A good read What is DOM reflow?