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: 3 months ago

Test name	Executions per second
appendChild fragment	9115767.0 Ops/sec
appendChildren	3544.6 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)

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

appendChild fragment

appendChildren