Benchmark: append vs innerHTML

HTML Preparation code:


<p id='bar'></p>

Script Preparation code:


var el = document.getElementById('bar');
var html = '<span class="red">Some text here</span> fdsfjdasfkjdasfkljdasflj';

Tests:

innerHTML
el.innerHTML = html;
append
el.append(html);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
append

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in the provided benchmark.

**Overview**

The test compares two approaches for updating the content of an HTML element: `el.innerHTML` and `el.append()`. The goal is to determine which approach is faster, with better performance characteristics.

**Script Preparation Code vs. Html Preparation Code**

When a web browser loads a webpage, it creates a Document Object Model (DOM) representation of the HTML document. This model represents the structure and content of the page as a tree-like data structure.

In this benchmark, the `Script Preparation Code` sets up an element with ID "bar" in the DOM using JavaScript. The `Html Preparation Code`, on the other hand, creates a plain `<p>` element with ID "bar" directly in the HTML file. This means that the browser has already created the element and its child nodes when it loads the page.

**Options Compared**

Two options are being compared:

1. **el.innerHTML = html;**: This approach uses the `innerHTML` property of the `element` object to set its content.
2. **el.append(html);**: This approach uses the `append()` method of the `Element` interface to add a child node to the element.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

*   **innerHTML**: Pros: generally faster, as it only updates the existing content. Cons: can lead to unnecessary DOM mutations if the HTML structure changes frequently.
*   **append()**: Pros: more flexible, as it allows for dynamic insertion of nodes without modifying the HTML structure. Cons: might be slower due to additional overhead in creating a new node.

**Library and Special JS Features**

The benchmark uses native JavaScript features:

*   `Element.append()`: This method is part of the modern web platform, introduced in ECMAScript 2015 (ES6).
*   No special JavaScript features or syntax are used in this benchmark.

**Benchmark Preparation Code and Test Cases**

The test cases use a simple scenario where an element with ID "bar" has its content updated using either `innerHTML` or `append()`. The raw UA string, browser version, device platform, operating system, executions per second, and test name are recorded to evaluate performance differences.

**Other Alternatives**

There are other approaches for updating HTML content, such as:

*   Using a templating engine like jQuery's `$.html()` or a dedicated template engine.
*   Utilizing a library like React or Angular, which provide their own set of methods and APIs for DOM manipulation.
*   Leveraging server-side rendering techniques to generate the initial HTML content before sending it to the client.

However, in this specific benchmark, only two approaches (`innerHTML` and `append()`) are being compared.

Related benchmarks:

append vs innerHTML (version: 0)

Comparing performance of: innerHTML vs append

Created: 6 years ago by: Registered User

Jump to the latest result

innerHTML

append

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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