scaling clonenode

JavaScript performance comparison

Test case created by ryansolid

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var one = '<tr><td class=col-md-1>1</td><td class=col-md-4><a>Banana</a></td><td class=col-md-1><a><span class="glyphicon glyphicon-remove remove" aria-hidden=true /></a></td><td class=col-md-6 /></tr>';
  
  var big = one.repeat(10);
  var bigger = one.repeat(100);
  var biggest = one.repeat(1000);
  
  var oneT = document.createElement('template');
  oneT.innerHTML = one;
  var oneC = oneT.content;
  
  var oneTr = oneC.firstChild;
  
  var bigT = document.createElement('template');
  bigT.innerHTML = big;
  var bigC = bigT.content;
  
  var biggerT = document.createElement('template');
  biggerT.innerHTML = bigger;
  var biggerC = biggerT.content;
  
  var biggestT = document.createElement('template');
  biggestT.innerHTML = biggest;
  var biggestC = biggestT.content;
  
  var biggestDiv = document.createElement('div');
  biggestDiv.innerHTML = biggest;
  
  var parent = document.createElement('table');

};

Benchmark.prototype.teardown = function() {
  parent.textContent = '';

};
</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
one
for (let i = 0, len = 1000; i < len; i++) {
  parent.appendChild(oneC.firstChild.cloneNode(true));
}
pending…
big
let nodes, node;
for (let i = 0, len = 100; i < len; i++) {
  nodes = bigC.cloneNode(true);
  while(node = nodes.firstChild) parent.appendChild(node);
}
pending…
bigger
let nodes, node;
for (let i = 0, len = 10; i < len; i++) {
  nodes = biggerC.cloneNode(true);
  while(node = nodes.firstChild) parent.appendChild(node);
}
pending…
biggest
const nodes = biggestC.cloneNode(true);
let node;
while(node = nodes.firstChild) parent.appendChild(node);
pending…
one tr
for (let i = 0, len = 1000; i < len; i++) {
  parent.appendChild(oneTr.cloneNode(true));
}
pending…
big block
for (let i = 0, len = 100; i < len; i++) {
  parent.appendChild(bigC.cloneNode(true));
}
pending…
bigger block
for (let i = 0, len = 10; i < len; i++) {
  parent.appendChild(biggerC.cloneNode(true));
}
pending…
biggest block
parent.appendChild(biggestC.cloneNode(true));
pending…
biggest div
parent.appendChild(biggestDiv.cloneNode(true));
pending…
one block
for (let i = 0, len = 1000; i < len; i++) {
  parent.appendChild(oneC.cloneNode(true));
}
pending…

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

Compare results of other browsers

0 Comments