cloneNode + edit vs createElement Performance

JavaScript performance comparison

Revision 38 of this test case created by

Preparation code

<script>
  var a = document.createElement('a');
  a.href = 'http://www.google.com/blablabla';
  a.innerHTML = 'Test';

  var spanCreate = document.createElement('span');
  spanCreate.innerHTML = '<a href="http://www.google.com/blablabla">Test</a>';
</script>
    

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
clone element
var aClone = a.cloneNode(true);
aClone.href = "http://www.google.com/blablabla2";
pending…
create element + innerHTML
var aCreate = document.createElement('a');
aCreate.href = 'http://www.google.com/blablabla2';
aCreate.innerHTML = 'Test';
pending…
create element + create text node
var aCreate = document.createElement('a');
aCreate.href = 'http://www.google.com/blablabla2';
var text = document.createTextNode('Test');
aCreate.appendChild(text);
pending…
innerHTML + clone node
spanCreate.innerHTML = '<a href="http://www.google.com/blablabla2">Test</a>';
var aCreate = spanCreate.firstChild.cloneNode(true);
pending…
create element + textContent
var aCreate = document.createElement('a');
aCreate.href = 'http://www.google.com/blablabla2';
aCreate.textContent = 'Test';
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