Benchmark: innerHTML vs insertAdjacentHTML vs createContextualFragment 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:

innerHTML
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.innerHTML += html;
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

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

createContextualFragment

31/s

insertAdjacentHTML

29/s

innerHTML

0/s

View exact numbers

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