Select option appendChild vs documentFragment

Benchmark created on

Description

A perf test between appending option elements to the select directly vs appending them to a document fragement and then appending the document fragment to the select

Preparation HTML

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

Setup

let dropdownEl = document.querySelector("#test-dropdown");

Teardown

dropdownEl = null;

Test runner

Ready to run.

Testing in
TestOps/sec
Using append
for (let i=0; i<15000; i++) { 
	dropdownEl.append(`<option id="${i}" value="${i}">${i}</option>`)
}
ready
Using DocumentFragment
const fragment = document.createDocumentFragment();
for (let i=0; i<15000; i++) { 
	fragment.append(`<option id="${i}" value="${i}">${i}</option>`)
}
dropdownEl.append(fragment);
ready
Using documentFragment #2
const fragment = document.createDocumentFragment();
for (let i=0; i<15000; i++) {
	const option = document.createElement('option'); 
	const value = String(i);
	option.value = value;
	option.id = value;
	option.textContent = value;
	fragment.append(option);
}
dropdownEl.append(fragment);
ready

Revisions

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