Run results for: .createElement() vs .createHTMLDocument() vs DOMParser() vs .appendChild()

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6.1 Safari/605.1.15

Browser: Safari 16

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
.createElement() + .innerHTML	370804032.0 Ops/sec
.createHTMLDocument() + .innerHTML	342765728.0 Ops/sec
DOMParser	379679200.0 Ops/sec
Nested .createElement() + .appendChild()	348553952.0 Ops/sec

Script Preparation code:

const count = 20_000;
const testString = '<div>' + (new Array(count)).fill('').join('<b>x</b>') + '</div>';

Tests:

.createElement() + .innerHTML
function test_innerHTML() { const body = document.createElement('body'); body.innerHTML = testString; return body; }
.createHTMLDocument() + .innerHTML
function test_createHTMLDocument() { const doc = document.implementation.createHTMLDocument(''); doc.body.innerHTML = testString; return doc.body; }
DOMParser
function test_DOMParser() { return (new DOMParser()).parseFromString(testString, 'text/html').body; }
Nested .createElement() + .appendChild()
function test_innerHTML() { let i = -1; const div = document.createElement('div'); while (++i < count) { const b = document.createElement('b'); b.textContent = 'x'; div.appendChild(b); } return div; }