Benchmark: performanceDom - MeasureThat.net

Script Preparation code:

const a = document.createElement('test');
        document.head.appendChild(a); // Append 'a' to the document body
        let string = 'This element contains <code>code</code>\n' + '<p><strong>and HTML tags</strong></p>`'

        // Update innerHTML with a larger content
        let start = performance.now();
        a.innerHTML = string;
        let end = performance.now();
        let diff = end - start;

        start = performance.now();
        a.innerText = string;
        end = performance.now();
        let diff2 = end - start;

        start = performance.now();
        a.textContent = string;
        end = performance.now();
        let diff3 = end - start;

        start = performance.now();
        a.outerHTML = string;
        end = performance.now();
        let diff4 = end - start;

        console.table({
            'innerHTML': diff,
            'innerText': diff2,
            'textContent': diff3,
            'outerHTML': diff4
        });

Tests:

innerHTML
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.innerHTML = string; let end = performance.now(); let diff = end - start; console.log(diff);
innerText
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.innerText = string; let end = performance.now(); let diff = end - start; console.log(diff);
textContent
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.textContent = string; let end = performance.now(); let diff = end - start; console.log(diff);
outerHTML
const a = document.createElement('test'); document.head.appendChild(a); // Append 'a' to the document body let string = 'This element contains <code>code</code>\n' + 'and HTML tags`'; let start = performance.now(); a.outerHTML = string; let end = performance.now(); let diff = end - start; console.log(diff);

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.

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, providing insights into the performance of various browsers and devices.

**Benchmark Definition**

The provided JSON represents a benchmark definition for a test case called "performanceDom". This benchmark tests the performance of four different properties on an HTML element: `innerHTML`, `innerText`, `textContent`, and `outerHTML`. The script preparation code creates a new HTML element, appends it to the document body, and initializes its text content with a large string containing HTML tags.

The benchmark measures the time taken by each property setter (or getter) to update the element's text content. Specifically:

* `innerHTML` sets the entire HTML content of the element.
* `innerText` sets only the text content of the element.
* `textContent` sets only the text content of the element, without HTML tags.
* `outerHTML` sets the entire HTML content of the element, including attributes and tags.

**Comparison of Options**

The benchmark compares the performance of these four options:

Pros and Cons:

1. **innerHTML**:
	* Pros: Simple and efficient, as it only updates the text content without modifying the HTML structure.
	* Cons: Can be slower due to the need to parse and update the entire HTML content.
2. **innerText**:
	* Pros: Faster than `innerHTML`, as it only updates the text content without parsing the HTML structure.
	* Cons: May not work correctly in all cases, especially when the element has attributes or other non-text content.
3. **textContent**:
	* Pros: Fast and efficient, as it only updates the text content without modifying the HTML structure or parsing attributes.
	* Cons: May not work correctly with certain HTML tags or attributes.
4. **outerHTML**:
	* Pros: Most accurate representation of the element's HTML content, including attributes and tags.
	* Cons: Can be slower due to the need to parse and update the entire HTML content.

**Library and Purpose**

In this benchmark, there is no explicit library used. However, the `performance.now()` function is used to measure the time taken by each property setter (or getter). This function is a built-in JavaScript method that returns the current timestamp in milliseconds.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

If you're looking for alternative benchmarks or testing tools, some options include:

* Browserbench: A benchmarking tool specifically designed for web browsers.
* WebPageTest: A performance testing tool that measures the load times and responsiveness of websites.
* BenchmarkJS: A JavaScript benchmarking framework that allows you to create and run custom benchmarks.

Keep in mind that these alternatives may have different use cases, requirements, or features compared to MeasureThat.net.

Related benchmarks:

performanceDom (version: 1)

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