cloneNode vs createElement vs innerHTML

JavaScript performance comparison

Revision 46 of this test case created by

Preparation code

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

<script>
  var html = '<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><circle id="confirmation-icon-i" r="200.000000" cy="255.999989" cx="256.000002"/><path id="confirmation-icon" d="M256,50C142.229,50,50,142.229,50,256s92.229,206,206,206s206-92.229,206-206S369.771,50,256,50z M256,435.863c-99.397,0-179.863-80.577-179.863-179.864c0-99.396,80.574-179.863,179.863-179.863	c99.396,0,179.863,80.575,179.863,179.863C435.863,355.396,355.287,435.863,256,435.863z M256,96.226 c-88.241,0-159.774,71.533-159.774,159.774S167.759,415.774,256,415.774S415.774,344.241,415.774,256S344.241,96.226,256,96.226z	 M257.901,372.18c-13.661,0-24.739-11.079-24.739-24.743c0-13.66,11.078-24.735,24.739-24.735c13.665,0,24.74,11.075,24.74,24.735 C282.642,361.101,271.566,372.18,257.901,372.18z M277.353,299.053v4.45c0,0-37.092,0-40.783,0v-4.45 c0-12.594,1.839-28.748,16.459-42.793c14.622-14.047,32.894-25.65,32.894-43.198c0-19.399-13.464-29.659-30.438-29.659 c-28.284,0-30.133,29.335-30.829,35.793h-39.665c1.056-30.589,13.984-73.373,70.732-73.373c49.178,0,71.289,32.936,71.289,63.822 C327.011,258.806,277.353,267.346,277.353,299.053z"/></svg>';

  var div = document.createElement('div');
  div.innerHTML = html;

  var rendered = document.createElement('div');
  rendered.innerHTML = html;

  var target = document.getElementById('target');
</script>
      
<script>
Benchmark.prototype.teardown = function() {
  target.innerHTML = '';

};
</script>

Preparation code output

<div id="target"></div> <div id="rendered"></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
innerHTML
target.innerHTML = html;
pending…
cloneNode()
target.appendChild(div.cloneNode(true));
pending…
cloneNode() rendered
target.appendChild(rendered.cloneNode(true));
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