Benchmark: Imperative DOM vs innerHTML vs <template>

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
Imperative DOM
<template>

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	188.9 Ops/sec
Imperative DOM	841379.3 Ops/sec
<template>	588530.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark measures the performance comparison between three approaches:

1. **Imperative DOM manipulation**: Using JavaScript to create and manipulate DOM elements directly.
2. **innerHTML**: Setting the inner HTML of an element using the `innerHTML` property.
3. **Template stamping**: Using a template element to generate HTML content.

**Test Cases**

Each test case represents one of the three approaches:

1. **"innerHTML"`**
```javascript
output.innerHTML += `\r\n    <div>\r\n        <p class="font-bold">Hello!</p>\r\n    </div>`;\r\n
```
This code sets the inner HTML of the `output` element to a new string containing a `<div>` element with a `<p>` element inside.

Pros:

* Simple and straightforward.
* No need to create DOM elements explicitly.

Cons:

* Can be slower due to the overhead of setting the inner HTML, especially if the content is complex or large.

2. **"Imperative DOM"`**
```javascript
const div = document.createElement('div');
const p = document.createElement('p');
p.classList.add('font-bold');
p.textContent = 'Hello!';
div.appendChild(p);
output.appendChild(div);
```
This code creates two new DOM elements (`<div>` and `<p>`) and appends them to the `output` element.

Pros:

* Gives more control over the generated HTML.
* Can be faster if the content is simple or small.

Cons:

* Requires creating multiple DOM elements, which can be slower for large or complex content.

3. **"<template>"`**
```javascript
output.appendChild(template.content.cloneNode(true));
```
This code appends the content of a template element to the `output` element using the `cloneNode()` method.

Pros:

* Can generate HTML content efficiently and dynamically.
* Reduces the overhead of creating new DOM elements.

Cons:

* Requires using a template element, which may not be supported by all browsers or environments.
* May require additional setup or configuration for optimal performance.

**Library: Template Elements**

The `<template>` element is a native HTML element that allows you to define a fragment of HTML content as a separate entity. The `content` property of the `template` element returns the cloned content, which can be appended to another element. This feature is useful for generating HTML content dynamically and efficiently.

**Special JavaScript Feature/Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark definition. However, note that template stamping uses a modern JavaScript feature called "template literals" (`\r\n    <div>\r\n        <p class="font-bold">Hello!</p>\r\n    </div>`), which is supported by most modern browsers.

**Alternatives**

Other alternatives for generating HTML content include:

1. **String manipulation**: Using string concatenation or regular expressions to generate HTML content.
2. **DOM traversal**: Using methods like `insertAdjacentHTML()` or `appendChild()` to append elements to the DOM.
3. **Third-party libraries**: Using libraries like jQuery, React, or Angular to render and manage HTML content.

Keep in mind that each approach has its own trade-offs in terms of performance, complexity, and compatibility with different browsers and environments.

Related benchmarks:

Imperative DOM vs innerHTML vs <template> (version: 6)

How do imperative DOM manipulation, innerHTML, and template stamping compare on speed?

Comparing performance of: innerHTML vs Imperative DOM vs <template>

Created: 4 years ago by: Registered User

Jump to the latest result

innerHTML

Imperative DOM

<template>

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):