Benchmark: range.createContextualFragment vs template.innerHtml Fork

Script Preparation code:

var str = `<div>${Math.random().toString().slice(2)}</div>`;
var temp = document.createElement('template')
var res = '';
for(i=0; i<30000; i++){
	res += str
}

Tests:

createContextualFragment
temp.appendChild(document.createRange().createContextualFragment(res))
innerHTML
temp.innerHTML = res

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createContextualFragment
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
createContextualFragment	46.3 Ops/sec
innerHTML	51.4 Ops/sec

Related benchmarks:

Comparação entre createElement vs string template
Dom vs DomFragments vs Hybrid
createContextualFragment vs InnerHtml
createElement vs createContextualFragment
template innerHTML vs DocumentFragment vs createElement - createTextNode 2
range.createContextualFragment vs template.innerHtml
Comparação entre createElement vs string template1
template innerHTML vs DocumentFragment createElement without clone
createElement vs createElementNS

range.createContextualFragment vs template.innerHtml Fork (version: 1)

Comparing performance of: createContextualFragment vs innerHTML

Created: one year ago by: Guest

Jump to the latest result

createContextualFragment

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A