Benchmark: PerformanceTestDom

Script Preparation code:


        const a = document.createElement('test');
        let string = 'This element contains <code>code</code>\n' + '<p><strong>and HTML tags</strong></p>'

        let start = performance.now();
        for (let i = 0; i < 10_000; i++) {
            document.head.appendChild(a);
            a.innerHTML = string;
        }
        let end = performance.now();
        let diff = (end - start) / 10_000;


        start = performance.now();
        for (let i = 0; i < 10_000; i++) {
            document.head.appendChild(a);
            a.innerText = string;
        }
        end = performance.now();
        let diff2 = (end - start) / 10_000;


        start = performance.now();
        for (let i = 0; i < 10_000; i++) {
            document.head.appendChild(a);
            a.textContent = string;
        }
        end = performance.now();
        let diff3 = (end - start) / 10_000;


        start = performance.now();
        for (let i = 0; i < 10_000; i++) {
            document.head.appendChild(a);
            a.outerHTML = string;
        }
        end = performance.now();
        let diff4 = (end - start) / 10_000;

        console.table({
            'innerHTML': diff,
            'innerText': diff2,
            'textContent': diff3,
            'outerHTML': diff4
        });

Tests:

innerHTML
const a = document.createElement('test'); let string = 'This element contains <code>code</code>\n' + 'and HTML tags' let start = performance.now(); for (let i = 0; i < 10_000; i++) { document.head.appendChild(a); a.innerHTML = string; } let end = performance.now(); let diff = (end - start) / 10_000;
innerText
const a = document.createElement('test'); let string = 'This element contains <code>code</code>\n' + 'and HTML tags' let start = performance.now(); for (let i = 0; i < 10_000; i++) { document.head.appendChild(a); a.innerText = string; } let end = performance.now(); let diff2 = (end - start) / 10_000;
textContent
const a = document.createElement('test'); let string = 'This element contains <code>code</code>\n' + 'and HTML tags' let start = performance.now(); for (let i = 0; i < 10_000; i++) { document.head.appendChild(a); a.textContent = string; } let end = performance.now(); let diff3 = (end - start) / 10_000;
outerHTML
const a = document.createElement('test'); let string = 'This element contains <code>code</code>\n' + 'and HTML tags' let start = performance.now(); for (let i = 0; i < 10_000; i++) { document.head.appendChild(a); a.outerHTML = string; } let end = performance.now(); let diff4 = (end - start) / 10_000;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
innerText
textContent
outerHTML

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.

Let's break down the benchmark and explain what's being tested.

The benchmark is testing the performance of setting different types of text content on an HTML element: `innerHTML`, `innerText`, `textContent`, and `outerHTML`.

Here are the options being compared:

1.  **`innerHTML`**: This property sets the inner HTML of an element, including both text and HTML tags. It's a more general-purpose property that can handle any type of content.
2.  **`innerText`**: This property specifically sets the plain text content of an element without interpreting any HTML tags. It's often used for accessibility purposes or when you need to set text content that shouldn't be interpreted as HTML.
3.  **`textContent`**: This property is similar to `innerText`, but it does interpret HTML tags within the content, allowing you to use HTML markup in your text.

**Pros and Cons:**

*   **`innerHTML`**:
    *   Pros: Can handle any type of content, including HTML tags.
    *   Cons: May be slower due to the need to parse and render HTML.
*   **`innerText`**:
    *   Pros: Faster than `innerHTML`, as it doesn't require parsing HTML.
    *   Cons: Limited to plain text, no HTML interpretation.
*   **`textContent`**:
    *   Pros: Can handle HTML markup within the content, allowing for more flexible text setting.
    *   Cons: Slower than `innerText` due to HTML parsing.

The benchmark measures the performance of setting each type of content on an element, which can help developers understand how to optimize their code for different use cases.

**Library Used:**

In this case, there is no specific library being used beyond the standard JavaScript and DOM APIs. The `performance.now()` function is used to measure time, and the `innerHTML`, `innerText`, `textContent`, and `outerHTML` properties are used directly on HTML elements.

**Latest Benchmark Results:**

The provided results show the performance of each content type on a Chrome 121 browser running on a Mac OS X 10.15.7 machine:

*   **`textContent`**: The fastest option, with an average execution rate of approximately 100 executions per second.
*   **`innerText`**: Slower than `textContent`, but still relatively fast, with an average execution rate around 14 executions per second.
*   **`innerHTML`** and **`outerHTML`**: The slowest options, with significantly lower average execution rates.

These results suggest that when performance is critical, using plain text (`innerText`) can be a good optimization. However, when you need to set HTML markup within the content, `textContent` might be a better choice due to its ability to interpret and handle HTML tags.

Related benchmarks:

PerformanceTestDom (version: 0)

Comparing performance of: innerHTML vs innerText vs textContent vs outerHTML

Created: 2 years ago by: Registered User

Jump to the latest result

innerHTML

innerText

textContent

outerHTML

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