innerHTML vs. cloneNode (v5)

Revision 5 of this benchmark created on

Description

Tests various DOM construction patterns.

Preparation HTML

<style>
  .hidden {display: none;}
</style>
<div class="hidden"></div>
<div class="shown"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var content = '<select>';
  for (var i = 0; i < 200; i++)
    content += '<option value="'+i+'">'+i+'</option>';
  content += '</select>';
  
  var proto = document.createElement("div");
  proto.innerHTML = content;
  
  var frag = document.createDocumentFragment(),
  frag.appendChild(proto.cloneNode(true));

  var $proto = $('<div>'+content+'</div>');

  var hidden = $('.hidden').get(0);
  var shown = $('.shown').get(0);

  var detached = document.createElement('div');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML on hidden node
hidden.innerHTML = content;
ready
innerHTML on shown node
shown.innerHTML = content;
ready
innerHTML on detached node
detached.innerHTML = content;
ready
cloneNode
proto.cloneNode(true);
ready
createElement
document.createElement('div');
ready
cloneNode into new node
document.createElement('div').appendChild(proto.cloneNode(true));
ready
cloneNode into detached node
detached.childNodes = [proto.cloneNode(true)];
ready
DocumentFragment
dest3.appendChild(frag.cloneNode(true));
ready

Revisions

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