Javascript tests and results

I’ve been testing some basic javascript functions in the awesome jsperf.com. 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

Conclusion

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

Conclusion

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 = "
12
";

$(“body”).append($(elements));

Create elements by hand but still using jQuery

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

Using innerHTML

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

Conclusion

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 = 'http://43.lc/files_pub/counter-sell.gif';	 
newimg.onclick = function(){ swapCase();  };	 
document.getElementById('testc1').appendChild(newimg);
14,255fastest
jquery
$('#testc2').append($('<img>', { 
    alt : "Test Image",
    src : 'http://43.lc/files_pub/counter-sell.gif',
    click: function(){
        swapCase();
    }
}));
8,575 41% slower
jquery alternative
$('#testc3').append( $(document.createElement("img"))
    .attr({ 
        src: 'http://43.lc/files_pub/counter-sell.gif',
        alt: 'Test Image'
     })
    .click(function(){
        swapCase();
    })
 );
7,950    49% slower

Advertisements

One thought on “Javascript tests and results

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s