MeasureThat.net

Run results for: template vs documentFragment

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Chrome 134
Mac OS X 10.15.7
Desktop
9 days ago
Test name Executions per second
createElement 260212.4 Ops/sec
createDocumentFragment 5163857.5 Ops/sec
Script Preparation code:
AخA
 
const html = "<span class='eChat-Custom-group-member Right'>5 members</span>"
Tests:

  • createElement

     
    const template = document.createElement("template");
    template.innerHTML = html.toString().trim();
    document.body.appendChild(template.content.firstChild);

  • createDocumentFragment

     
    var frag = document.createDocumentFragment();
    frag.innerHtml = html.toString().trim();
    document.body.appendChild(frag);