Javascript tests and results

I’ve been testing some basic javascript functions in the awesome Some confirmations about the native browser code being faster, but strangely, there’s a huge difference in performance. I started wanting to know the difference between using a strange js code i found online. It used .html().html("<img [...]") every cicle. Surely this wasn't the best way to handle a photo gallery counter. 

getElementById vs jQuery id selector

run the test: jquery id vs document.getElementById
jQuery ID :  $(“#foo”);

result: 305,690 92% slower

document.getElementById : document.getElementById(“foo”);

result: 3,824,633 fastest

jquery id vs getElementById


Unless i did something terribly wrong, native implementation is way faster. I would expect to be faster, but not in this order of magnitude.



jQuery 1.8 selectors: id vs class vs tag vs pseudo vs. attribute

run the test: id vs class vs tag vs pseudo vs. attribute selectors
There’s a lot of results on this test, and almost every entry points to the $("#foo") selector being the fastest, class $(".bar") and tag $("blockquote") on the same range, and pseudo and attribute $(":hidden") and $("[name='baz']") are really slow.

jquery selectors 1

appendChild VS jQuery appendTo

appendChild vs appendTo
Next, i created a test for appending a child node to a html element. the element was created outside the test.

appendChild :  document.getElementById(‘testc1’).appendChild(newdiv);

result: 2,087,401 fastest

appendTo : $(newdiv).appendTo(‘#testc1’);

result: 8,250 100% slower

appendChild vs appendTo


Again, i wasn’t expecting such a huge difference between native and jQuery performance.

Creating complex elements

run the test: creating and appending elements (by WTK)

The following test tries to append several html elements
Passing full html string to jQuery

var elements = "


Create elements by hand but still using jQuery

function create() {
  return $("
").append($("").append('tr').append('td')); } $("body").append(create());

Using innerHTML

var elements = "
"; var div = document.createElement('div') = 'mycustomdiv' document.getElementsByTagName('body')[0].appendChild(div); div.innerHTML = elements; insert elementsinsert elements firefox ie other


Sadly, the browser implementation differs greatly from chrome to the rest, so innerHTML is still a bit and miss.

Creating a image node with attributes

What started as a simple gallery turned out as a great opportunity to do these performances tests. The source didn’t have a license and the code behave so badly, that isn’t wor

Test Ops/sec
 no jquery

var newimg = document.createElement("img");	 
newimg.alt = "Test Image";	 
newimg.src = '';	 
newimg.onclick = function(){ swapCase();  };	 
$('#testc2').append($('<img>', { 
    alt : "Test Image",
    src : '',
    click: function(){
8,575 41% slower
jquery alternative
$('#testc3').append( $(document.createElement("img"))
        src: '',
        alt: 'Test Image'
7,950    49% slower


One thought on “Javascript tests and results

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s