Benchmark: Update template elements vs replace template HTML

HTML Preparation code:

<template id="real-template">
    <article class="article">
        <header class="article-header">
            <h1 class="article-header_title">${title}</h1>
            <i class="article-header_created">
                Created by:
                <b class="article-header_author">${author}</b>
            </i>
        </header>
        <p class="article-text">${text}</p>
    </article>
</template>

Script Preparation code:

window.articles = [
    {
        title: 'Lorem ipsum dolor sit amet',
        author: 'John Doe',
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.\nIllum, impedit voluptatem? Ratione.'
    },
    {
        title: 'Consectetur adipisicing',
        author: 'John Dox',
        text: 'Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit.\nIllum, impedit voluptatem?'
    },
    {
        title: 'Impedit voluptatem',
        author: 'Johan Doch',
        text: 'Impedit voluptatem? Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit.'
    }
];

const keys = ['title', 'author', 'text'];
const classes = [
  '.article-header_' + keys[0],
  '.article-header_' + keys[1],
  '.article-' + keys[2]
];

// get template, clone it, replace textContent of nodes
const realTemplate = document.getElementById('real-template');
window.fromTemplate = (vars) => {
    const node = realTemplate.content.firstElementChild.cloneNode(true);
    const nodes = node.querySelectorAll('' + classes);
    for (let i = 0; keys[i]; i++) {
        nodes[i].textContent = vars[keys[i]];
    }
    return node;
}

// get template, replace full HTML, clone it
const tempTemplate = document.createElement('template');
window.fromString = (vars) => {
    tempTemplate.innerHTML =  `
    <article class="article">
        <header class="article-header">
            <h1 class="article-header_title">${vars.title}</h1>
            <i class="article-header_created">
                Created by:
                <b class="article-header_author">${vars.author}</b>
            </i>
        </header>
        <p class="article-text">${vars.text}</p>
    </article>`;
    return tempTemplate.content.firstElementChild.cloneNode(true);
}

Tests:

From template
let i = 10000; while (i--) { if (i % 3 === 0) { fromTemplate(articles[2]); continue; } if (i % 2 === 0) { fromTemplate(articles[1]); continue; } fromTemplate(articles[0]); }
From string
let i = 10000; while (i--) { if (i % 3 === 0) { fromString(articles[2]); continue; } if (i % 2 === 0) { fromString(articles[1]); continue; } fromString(articles[0]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
From template
From string

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
From template	63.6 Ops/sec
From string	14.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the benchmark.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches: updating template elements and replacing template HTML. The test case uses JavaScript microbenchmarks, which are small programs designed to measure the execution time of specific code snippets.

**Approaches Compared**

There are two approaches compared:

1. **Updating Template Elements**: This approach updates the `textContent` property of the cloned nodes in the template. The template is cloned using `cloneNode(true)`, and then the `textContent` property is updated for each node.
2. **Replacing Template HTML**: This approach replaces the full HTML content of the template with a new string. The template's `innerHTML` property is updated, and then the cloned content is returned.

**Pros and Cons**

### Updating Template Elements

Pros:

* More efficient than replacing the entire template HTML, as it only updates specific nodes.
* Less memory allocation required, as only new text content needs to be created.

Cons:

* Can lead to more complex DOM manipulation, which may introduce additional overhead.
* May not be as cache-friendly as replacing the entire template HTML.

### Replacing Template HTML

Pros:

* More cache-friendly than updating individual nodes, as the entire template is replaced.
* Can be faster for large templates or complex updates.

Cons:

* Requires more memory allocation, as a new string needs to be created and assigned to `innerHTML`.
* May require more DOM manipulations, such as parsing the updated HTML.

**Other Considerations**

Both approaches have their trade-offs. The choice of approach depends on the specific use case and performance requirements.

**Library Usage**

In this benchmark, the `window.fromTemplate` function is used for updating template elements, while `window.fromString` is used for replacing template HTML. These functions are likely custom implementations by the test creator. The libraries or frameworks used in these functions are not explicitly mentioned in the provided information.

**Special JavaScript Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark that require explanation. The code snippets focus on measuring performance, and the language-specific details are kept to a minimum.

**Alternatives**

If you're interested in exploring alternative approaches, here are some other methods:

* **Using `document.querySelector`**: Instead of cloning the template, use `document.querySelector` to select the nodes and update their text content.
* **Using a library like React or Angular**: These frameworks provide built-in support for updating template elements and replacing HTML. You can leverage these libraries to optimize your performance-critical code.
* **Using a native JavaScript method like `HTMLElement.textContent`**: This method allows you to update the text content of an element without cloning it.

Keep in mind that each approach has its own trade-offs, and the best choice depends on your specific use case and requirements.

Related benchmarks:

Update template elements vs replace template HTML (version: 1)

Comparing performance of: From template vs From string

Created: 6 years ago by: Registered User

Jump to the latest result

From template

From string

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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