Run results for: AppendChild vs DocumentFragment

Run details:

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: Chrome 111

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

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); } })();