Run results for: createElement vs cloneNode from DOM

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36

Browser: Chrome 80

Operating system: Mac OS X 10.14.6

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
createElement	8.0 Ops/sec
cloneNode	7.1 Ops/sec

HTML Preparation code:

<div class='container'>
  <div>
    <a href="#">link</a>
  </div>
</div>

<div id="appendedItems"></div>

Tests:

createElement
var itemsContainer = document.getElementById('appendedItems'); for (i=0; i < 10000; i++) { var fragment = document.createDocumentFragment(); var container = document.createElement('div'); container.className = 'container'; var div = document.createElement('div'); var a = document.createElement('a'); var aTextNode = document.createTextNode('link'); a.href = '#'; a.appendChild(aTextNode); div.appendChild(a); container.appendChild(div); fragment.appendChild(container); itemsContainer.appendChild(fragment); }
cloneNode
var itemsContainer = document.getElementById('appendedItems'); var container = document.querySelector('.container'); for (i=0; i < 10000; i++) { var fragment = document.createDocumentFragment(); var cloned = container.cloneNode(true); var a = cloned.querySelector('a'); a.href = '##'; a.textContent = 'newLink'; fragment.appendChild(cloned); itemsContainer.appendChild(fragment); }