cloneNode vs createElement Performance (v19)

Revision 19 of this benchmark created on

Description

check speeds with different elements

Preparation HTML

<script>
  var img = document.createElement("img");
  img.src = "http://www.google.com/intl/en_com/images/srpr/logo2w.png";
  
  var div = document.createElement("div");
  div.className = "myclass1 myclass2";
  
  var input = document.createElement("input");
  input.type = "checkbox";
  input.className = "myinputclass";

  var mem = {
    'img': document.createElement('img'),
    'div': document.createElement('div'),
    'input': document.createElement("input")
  };

  function clone(tagName) {
    return mem[tagName].cloneNode(false)
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
clone image
var img = clone("img");
img.className = "myinputclass";
img.src = "http://www.google.com/intl/en_com/images/srpr/logo2w.png";
 
ready
create image
var img = document.createElement("img");
img.className = "myinputclass";
img.src = "http://www.google.com/intl/en_com/images/srpr/logo2w.png";
 
ready
clone div
var div = clone("div");
div.className = "myclass1 myclass2";
ready
create div
var div = document.createElement("div");
div.className = "myclass1 myclass2";
 
ready
clone input
var input = clone("input");
input.type = "checkbox";
input.className = "myinputclass";
ready
create input
var input = document.createElement("input");
input.type = "checkbox";
input.className = "myinputclass";
ready

Revisions

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