AppendChild vs DocumentFragment

Benchmark created on

Preparation HTML

<select id="test"></select>

Teardown

document.querySelector('select#test').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Appending HTML strings
(() => { 
const dropdown = document.querySelector('select#test');

for (let i=0; i<1000; i++) { dropdown.append(`<option id="${i}" value="${i}">${i}</option>`)
}
})();
ready
DocumentFragment #1
(() => {
const dropdown = document.querySelector('select#test');

const fragment = document.createDocumentFragment();

for (let i=0; i<1000; i++) fragment.append(`<option id="${i}" value="${i}">${i}</option>`);

dropdown.appendChild(fragment);
})();
ready
DocumentFragment #2
(() => {
const dropdown = document.querySelector('select#test');

const fragment = document.createDocumentFragment();

for (let i=0; i<1000; i++) {
	const option = document.createElement('option');
	option.value = `${i}`;
	option.setAttribute('id', `${i}`);
	option.textContent = `${i}`;
	fragment.appendChild(option);
}
dropdown.appendChild(fragment);
})();
ready
Appending DOM objects
(() => {
const dropdown = document.querySelector('select#test');

for (let i=0; i<1000; i++) {
	const option = document.createElement('option');
	option.value = `${i}`;
	option.setAttribute('id', `${i}`);
	option.textContent = `${i}`;
	dropdown.appendChild(option);
}
})();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.