createContextualFragment vs InnerHtml
Date tested:
3 years ago
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15
Test name
Executions per second
createContextualFragment
52.8 Ops/sec
InnerHtml
56.4 Ops/sec
Benchmark definition (click to collapse):
Script Preparation code:
var str = `<div>${Math.random().toString().slice(2)}</div>`; var range = document.createRange(); var temp = document.createElement('template') var res = ''; for(i=0; i<30000; i++){ res += str }
Tests:
createContextualFragment
var t1 = new Date().now var test1 = range.createContextualFragment(res)
InnerHtml
temp.innerHTML = res var test2 = temp.content
Open this result on MeasureThat.net