Benchmark: Dom vs DomFragments vs Hybrid

Tests:

DOM
const test = document.createElement('div') test.innerHTML = '<div>foo bar</div>' document.body.append(...test.childNodes)
DomFragment
const test = document.createRange().createContextualFragment('<div>foo bar</div>') document.body.append(test)
hybrid
const test1 = document.createElement('div') const test2 = document.createRange().createContextualFragment('<div>foo bar</div>') test1.append(test2) document.body.append(...test1.childNodes)

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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0

Browser/OS: Firefox 95 on Linux

Dom vs DomFragments vs Hybrid (version: 0)