Run results for: appendChild with DocumentFragmenet vs append Array of Elements

Run details:

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

Browser: Chrome 126

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

appendChild fragment

10.4M/s

appendChildren

3K/s

View exact numbers

Test name	Executions per second
✓ appendChild fragment	10,430,550 Ops/sec
appendChildren	2,794 Ops/sec

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var container = document.getElementById('container');
var fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
var elements = [];
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  elements.push(li)
}

Tests:

appendChild fragment
container.appendChild(fragment)
appendChildren
container.append(...elements)