Benchmark: createContextualFragment vs insertAdjacentHTML long HTML strings repeat 10

HTML Preparation code:

<div id='id'></div>

Script Preparation code:

// Change these numbers to see how well they scale
batch = 1000;
repeat = 10;

Tests:

insertAdjacentHTML
const box = document.getElementsByTagName("div").item(0); let html = ''; for (let i = 0; i < batch; i++) html += '<div class="a b"><div>Test</div></div>'; for (let i = 0; i < repeat; i++) box.insertAdjacentHTML('beforeend', html);
createContextualFragment
const box = document.getElementsByTagName("div").item(0); let html = ''; for (let i = 0; i < batch; i++) html += '<div class="a b"><div>Test</div></div>'; for (let i = 0; i < repeat; i++) { const range = document.createRange(); range.selectNode(box); const documentFragment = range.createContextualFragment(html); box.appendChild(documentFragment); }

Rendered benchmark preparation results:

Previous results

Test case name	Result
insertAdjacentHTML
createContextualFragment

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

insertAdjacentHTML

36/s

createContextualFragment

29/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	36 Ops/sec
createContextualFragment	29 Ops/sec

createContextualFragment vs insertAdjacentHTML long HTML strings repeat 10 (version: 1)