Bulk DOM inserts: innerHTML vs append (v5)

Revision 5 of this benchmark created on

Description

Bulk inserts into the DOM take place through appendChild. By injecting a massive string of HTML to innerHTML we might get better performance. The only shortcoming is that we can no longer directly reference the elements that are injected in this way. The solution is to use ids = $(' *', container) to establish the ids in the DOM.

Here are a few tests that may not all be on a level playing field. This is just to get a feel for the differences.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="testdiv">Test div, should be cleared before a test starts</div>

<script>
  function make_test_element(id) {
   return "<div id=\"ele" + id + "\" class=\"testdd\"></div>";
  };
  
  function pmake_test_element() {
   return "<div>";
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jq (inner)html
$('#testdiv').html("");
var block = "";
for (var i = 0; i < 10000; i++) {
 block += make_test_element(i);
}
$('#testdiv').html(block);
ready
jq append
$('#testdiv').html("");
for (var i = 0; i < 10000; i++) {
 $('#testdiv').append(document.createElement("div"));
}
ready
raw innerHTML
var myDiv = document.getElementById('testdiv');
$('#testdiv').html("");
var block = "";
for (var i = 0; i < 10000; i++) {
 block += make_test_element(i);
}
myDiv.innerHTML = block;
ready
raw appendChild
var myDiv = document.getElementById('testdiv');
$('#testdiv').html("");
for (var i = 0; i < 10000; i++) {
 myDiv.appendChild(document.createElement("div"));
}
ready
jq (inner)html with identity rebuild
$('#testdiv').html("");
var block = "";
for (var i = 0; i < 10000; i++) {
 block += make_test_element(i);
}
$('#testdiv').html(block);
var ele_ids = $(' *', $('#testdiv'));
ready
raw appendChild with identity
var myDiv = document.getElementById('testdiv');
$('#testdiv').html("");
for (var i = 0; i < 10000; i++) {
 var ele = document.createElement("div")
 ele.id = "ele" + i;
 ele.className = "testdd";
 myDiv.appendChild(ele);
}
ready
raw appendChild with removed DOM element
var myDiv = document.getElementById('testdiv');
$('#testdiv').html("");
var parent = myDiv.parentNode;
parent.removeChild(myDiv);
for (var i = 0; i < 10000; i++) {
 myDiv.appendChild(document.createElement("div"));
}
parent.appendChild(myDiv);
ready

Revisions

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