jquery vs createElement

JavaScript performance comparison

Revision 66 of this test case created by Serg

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="div1"></div>
<script type="text/javascript">
var currentDiv = document.getElementById("div1");
for (var x=1000; x--;){
   var newDiv = document.createElement("div");
   newDiv.style.height = Math.floor(Math.random()*10)+ 'px';
   currentDiv.appendChild(newDiv);
}
var totalHeight = 0;
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery
$("#div1").children().filter(':visible').each(function(){
    totalHeight += $(this).outerHeight();
});
console.log('totalHeight');
pending…
createElement
currentDiv.style.display = "none";
            currentDiv.height = 'auto';
            totalHeight += currentDiv.height;
            currentDiv.height = 0 + 'px';
            currentDiv.style.display = "block";
            console.log(totalHeight)
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment