Run results for: Imperative DOM vs innerHTML vs <template>

Run details:

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

Browser: Chrome 128

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Imperative DOM

148K/s

102K/s

innerHTML

81/s

View exact numbers

HTML Preparation code:

<template id="template">
    <div>
        <p class="font-bold">Hello!</p>
    </div>
</template>
<output id="output"></output>

Script Preparation code:

output.replaceChildren();

Tests:

innerHTML
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));