MeasureThat.net

Run results for: Clone node vs create element frag

Compare cloning element vs creating a new one

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
Chrome 85
Windows
Desktop
4 years ago
Test name Executions per second
Clone node 250.9 Ops/sec
Create element 602.7 Ops/sec
HTML Preparation code:
​x
 
1
​
2
<div id='t'></div>
Script Preparation code:
 
function createExample() {
  return document.createElement('div');
}
Tests:

  • Clone node

     
    let fragment = document.createDocumentFragment();
    const cloneDiv = createExample();
    for(let i = 0; i < 100; ++i) {
      fragment.appendChild(cloneDiv.cloneNode(false));
    }
    ​
    document.getElementById('t').appendChild(fragment);
    ​

  • Create element

     
    let fragment = document.createDocumentFragment();
    for(let i = 0; i < 100; ++i) {
      fragment.appendChild(createExample());
    }
    ​
    document.getElementById('t').appendChild(fragment);
    ​