DocumentFragment vs. String Concat (v5)

Revision 5 of this benchmark created on

Preparation HTML

<select id="fragment"></select>
<select id="concat"></select>

Setup

const fragparent = document.querySelector('#fragment');
const concatparent = document.querySelector('#concat');

Test runner

Ready to run.

Testing in
TestOps/sec
document fragment
const frag = new DocumentFragment();
for (var i=0; i<10000; i++) {
	const elem = document.createElement('option');
	elem.value = i;
	elem.textContent = i;
	frag.appendChild(elem);
};
fragparent.append(frag);
ready
string
let str = '';
for (var i = 0; i < 10000; i++) {
	str += `<option value="${i}">${i}</option>`;
};
concatparent.append(str);
ready

Revisions

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