Run results for: createContextualFragment vs insertAdjacentHTML long HTML strings repeat 10

Run details:

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

Browser: Firefox 138

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

insertAdjacentHTML

36/s

createContextualFragment

29/s

View exact numbers

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

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