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
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.
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
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 = "<div><table><tr><td>1</td><td>2</td></tr></table></div>";
$(“body”).append($(elements));
Create elements by hand but still using jQuery
function create() {
return $("<div>").append($("<table>").append('tr').append('td'));
}
$("body").append(create());
Using innerHTML
var elements = "<div><table><tr><td>1</td><td>2</td></tr></table></div>";
var div = document.createElement('div')
div.id = 'mycustomdiv'
document.getElementsByTagName('body')[0].appendChild(div);
div.innerHTML = elements;
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://leitecarvalho.com/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://leitecarvalho.com/files_pub/counter-sell.gif',
click: function(){
swapCase();
}
}));
|
8,575 41% slower |
|
jquery alternative
|
$('#testc3').append( $(document.createElement("img"))
.attr({
src: 'http://leitecarvalho.com/files_pub/counter-sell.gif',
alt: 'Test Image'
})
.click(function(){
swapCase();
})
);
|
7,950 49% slower |
