performance of inserting text into an HTML element (v8)

Revision 8 of this benchmark created on

Description

http://stackoverflow.com/questions/4738592/how-to-improve-performance-of-inserting-text-into-an-html-element/4739012

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
 var i, divs, len, elems;
 
 
 
 for (var i = 0; i < 1000; i++) {
  var div = document.createElement("div");
  div.innerHTML = '<div class="testDiv">hello</div>';
 }
 
 for (var i = 0; i < 1000; i++) {
  var div = document.createElement("div");
  div.innerHTML = '<div class="testDiv0"></div>';
 }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
[half] native
divs = $(".testDiv"), i = 0, len = divs.length;
for (; i < len; i++) {
 divs[i].innerHTML = "default";
}
ready
jquery
$(".testDiv").html("default");
ready
jquery with empty divs
$(".testDiv0").html("default");
ready
No jQuery
elems = document.getElementsByClassName('testDiv');
i = elems.length;

while (i--) {
 elems[i].firstChild.nodeValue = "default";
}
ready
[half] native (loop reversed)
divs = $(".testDiv"), len = divs.length;
while (len--)
divs[len].innerHTML = "default";
}
ready

Revisions

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