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; rv:128.0) Gecko/20100101 Firefox/128.0

Browser: Firefox 128

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
appendChild fragment	18075034.0 Ops/sec
appendChildren	18.7 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