cloneNode vs createElement vs innerHTML

JavaScript performance comparison

Revision 60 of this test case created by ModifyingObjectSpeed

Preparation code

<div id="target"></div>

<script>

  function generateStyle() {
    return '#' + ((Math.random() * 0xFFFFFF) & 0xFFFFFF).toString(16);
  }
  function generateNodes() {

    var ul = document.createElement("ul");

    for (var i = 0; i < 10; i++) {
        var li= document.createElement("li");
        ul.appendChild(li);
    }

    updateNodes(ul);
    
    return ul;
  }

  function updateNodes(ul) {
      var len = ul.children.length;
      for(var i = 0; i < len; i++) {
          ul.children[i].textContent = "Item "+i+" val: " + Math.random();
          ul.children[i].style.backgroundColor = generateStyle();
      }
  }

  var ul = generateNodes();
  var cached = ul.cloneNode(true);

  var html = ul.innerHTML;

  var target = document.getElementById('target');
  target.appendChild(ul);
</script>
    

Preparation code output

<div id="target"></div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
cloneNode()
var newUl = ul.cloneNode(true);
updateNodes(newUl);
target.replaceChild(newUl, target.firstChild);
pending…
updateElement()
updateNodes(target.firstChild);
pending…
cachedNode
var old = target.firstChild;
updateNodes(cached);
target.replaceChild(cached, target.firstChild);
cached = old;
pending…
detachNode
var detached = target.removeChild(target.firstChild);
updateNodes(detached);
target.appendChild(detached);
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.

0 Comments