Benchmark: innerHTML vs textContent v2

Script Preparation code:

const targetElem = document.createElement('DIV');
targetElem.id = 'target';

targetElem.innerHTML = `
	<div>
		<span>Child 1</span>
	</div>
	<div>
		<span>Child 2</span>
	</div>
	<div>
		<span>Child 3</span>
	</div>
`;

document.body.appendChild(targetElem);

Tests:

innerHTML
document.getElementById('target').innerHTML = '';
textContent
document.getElementById('target').textContent = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
textContent

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; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	4404739.0 Ops/sec
textContent	4426368.0 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 world of JavaScript microbenchmarks!

**What is being tested?**

The provided JSON represents two test cases:

1. `innerHTML`: This test case measures the time it takes to clear the innerHTML property of an HTML element.
2. `textContent`: This test case measures the time it takes to clear the textContent property of an HTML element.

In both cases, a new DIV element is created, its inner or text content is set with some sample data, and then cleared using the respective property.

**Options being compared**

There are two options being compared:

1. `innerHTML`
2. `textContent`

These two properties are used to set the content of an HTML element. The main difference between them is that `innerHTML` sets both the text and the HTML structure of the element, while `textContent` only sets the text content.

**Pros and Cons**

* **innerHTML**: This property can be faster for larger datasets because it only needs to update the text content, whereas `textContent` needs to update the entire DOM tree. However, this comes at the cost of increased complexity and potential HTML injection vulnerabilities.
	+ Pros: Can be faster for large datasets
	+ Cons: More complex, potentially vulnerable to HTML injection attacks
* **textContent**: This property is simpler and safer than `innerHTML`, as it only updates the text content without changing the HTML structure. However, it might be slower for larger datasets because it needs to update the entire DOM tree.
	+ Pros: Simpler, safer
	+ Cons: Might be slower for large datasets

**Library usage**

In this benchmark, none of the libraries are explicitly mentioned.

**Special JS features or syntax**

None are mentioned in the provided JSON. However, if we were to consider other features like `const`, `let`, and `var` scoping, it's worth noting that they can affect performance due to their caching behavior. But this is not relevant to the specific properties being tested here.

**Other alternatives**

In general, when working with HTML elements in JavaScript, there are a few alternative approaches:

* Using `outerHTML` instead of `innerHTML`: This property sets both the text and the HTML structure of an element.
* Using a library like jQuery or DOM manipulation functions (e.g., `document.createElement('SPAN').textContent = 'Child 1';`) to update the content of elements.

However, these alternatives are not relevant to this specific benchmark, which only compares the performance of `innerHTML` and `textContent`.

I hope this explanation helps! Let me know if you have any further questions.

Related benchmarks:

innerHTML vs textContent v2 (version: 0)

Comparing performance of: innerHTML vs textContent

Created: one year ago by: Guest

Jump to the latest result

innerHTML

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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