Comments on: The speed of jQuery.append(…)

By: Dusty

Dusty — Thu, 24 Jun 2010 16:31:42 +0000

Yeah, I got that the main thing was jquery.append() is an order of magnitude out, but I thought it was interesting that I was averaging only a 10x speed decrease between the last two while you were seeing 30x.

Shame I don’t have FF on that same machine, it’d be interesting to see if it was just a FF/Chrome difference or if the arch plays a part as well.

By: Warlock

Warlock — Thu, 24 Jun 2010 03:57:32 +0000

I only did (a highly unscientific) one run. Originally when I posted this I only had the first three methods, then I added the fourth (innerHTML) and reran all the numbers on my work computer (Firefox, 32bit Windows XP). I also ran them on Chrome, but I didn’t record what the results were.

The gist that I took from the results was not to use jQuery.append(…) for large numbers of elements. innerHTML vs. appendChild wasn’t really a question for me because I need to be able to reference the node specifically in the future, hence I can’t just build everything into one big string.

Thanks for running the numbers again and posting results.

By: Dusty

Dusty — Thu, 24 Jun 2010 00:18:24 +0000

Out of curiosity, what was the StdDev of your numbers (or did you just do a single run)? I did a few tries, and the raw appendChild was ranging between 300 and 500ms.

My rough averages in Chrome 5.0.375.86 (Win32 on x64 hardware) are:

330
4400
3100
350

By: Kartik Sehgal

Kartik Sehgal — Wed, 23 Jun 2010 08:02:38 +0000

Thanks for sharing your research.

I have added one more option which is a little faster than string concatenation (by about 10%) and the difference becomes more apparent in slower browsers like IE.

var start = new Date();
var arrinners = [];
for(var i = 0; i < 10000; i++) {
arrinners.push("”);
}
$(“#divcntnr”).append(arrinners.join(”));
var end = new Date();
alert(“jQuery from array: ” + (end.valueOf() – start.valueOf()));