HTML Preparation code:
AخA
 
1
<template id="template">
2
    <div>
3
        <p class="font-bold">Hello!</p>
4
    </div>
5
</template>
6
<output id="output"></output>
Script Preparation code:
 
output.replaceChildren();
Tests:
  • innerHTML

    x
     
      output.innerHTML += `
        <div>
            <p class="font-bold">Hello!</p>
        </div>`;
     
  • Imperative DOM

     
      const div = document.createElement('div');
      const p = document.createElement('p');
      p.classList.add('font-bold');
      p.textContent = 'Hello!';
      div.appendChild(p);
      output.appendChild(div);
  • <template>

     
      output.appendChild(template.content.cloneNode(true));
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    innerHTML
    Imperative DOM
    <template>

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 3 months ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Chrome 129 on Windows
View result in a separate tab
Test name Executions per second
innerHTML 83.1 Ops/sec
Imperative DOM 221364.9 Ops/sec
<template> 152713.6 Ops/sec