Benchmark: AppendChild vs DocumentFragment

HTML Preparation code:

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

Tests:

Appending HTML strings
(() => { const dropdown = document.querySelector('select#test'); for (let i=0; i<5000; i++) { dropdown.append(`<option id="${i}" value="${i}">${i}</option>`) } })();
DocumentFragment #1
(() => { const dropdown = document.querySelector('select#test'); const fragment = document.createDocumentFragment(); for (let i=0; i<5000; i++) fragment.append(`<option id="${i}" value="${i}">${i}</option>`); dropdown.appendChild(fragment); })();
DocumentFragment #2
(() => { const dropdown = document.querySelector('select#test'); const fragment = document.createDocumentFragment(); for (let i=0; i<5000; i++) { const option = document.createElement('option'); option.value = `${i}`; option.setAttribute('id', `${i}`); option.textContent = `${i}`; fragment.appendChild(option); } dropdown.appendChild(fragment); })();
Appending DOM objects
(() => { const dropdown = document.querySelector('select#test'); for (let i=0; i<5000; i++) { const option = document.createElement('option'); option.value = `${i}`; option.setAttribute('id', `${i}`); option.textContent = `${i}`; dropdown.appendChild(option); } })();

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

AppendChild vs DocumentFragment (version: 0)