jquery vs createElement (v66)

Revision 66 of this benchmark created by Serg on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="div1"></div>
<script>
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>

Test runner

Ready to run.

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

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.