appendChild with DocumentFragmenet vs append Array of Elements

5 months ago
User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Test name Executions per second
appendChild fragment 9502907.0 Ops/sec
appendChildren 3244.1 Ops/sec
HTML Preparation code:
AخA
 
1
<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)
Open this result on MeasureThat.net