Run results for: createElement vs cloneNode from DOM

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15

Browser: Safari 12

Operating system: Mac OS X 10.12.6

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
createElement	8.0 Ops/sec
cloneNode	6.9 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); }