appendChild with DocumentFragmenet vs append Array of Elements
Date tested:
one month 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
Benchmark definition (click to collapse):
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)
Open this result on MeasureThat.net