Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent 3
(version: 0)
blah blah
Comparing performance of:
innerText vs innerHtml vs textContent
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='hello'>Hello, World!</div>
Script Preparation code:
let el = document.querySelector("#hello");
Tests:
innerText
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerText
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=610945" width="100%" height="500px"></iframe>
innerHtml
489K/s
innerText
437/s
textContent
364/s
View exact numbers
Test name
Executions per second
✓
innerHtml
488,978 Ops/sec
innerText
437 Ops/sec
textContent
364 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** The provided JSON represents a JavaScript microbenchmark test, specifically comparing the performance of three different ways to update the text content of an HTML element: `innerHTML`, `innerText`, and `textContent`. The test uses a simple example where it updates the text content of an HTML element 1000 times using each method. **Options being compared** The options being compared are: 1. **`innerHTML`**: sets the inner HTML of an element, including its contents, styles, and attributes. 2. **`innerText`**: sets the text content of an element without modifying its styles or attributes. 3. **`textContent`**: sets the text content of an element without modifying its styles or attributes, similar to `innerText`. However, it also preserves whitespace and other formatting. **Pros and Cons** * **`innerHTML`**: + Pros: allows for setting both text content and HTML structure in a single operation. + Cons: can be slower and more memory-intensive due to the need to parse and serialize HTML data. * **`innerText`**: + Pros: faster and more lightweight than `innerHTML`, but only sets text content without modifying styles or attributes. + Cons: may not preserve whitespace or other formatting, requires setting both style and content. * **`textContent`**: + Pros: similar to `innerText`, but preserves whitespace and other formatting. + Cons: still slower than `innerText`, and may require more memory due to the need to handle different types of text nodes. **Libraries used** None are explicitly mentioned in the provided code. However, it's likely that a standard JavaScript DOM API is being used. **Special JS features or syntax** No special JavaScript features or syntax are used in this test case. The benchmark only focuses on comparing the performance of three basic DOM methods. **Alternatives** Other alternatives for updating text content include: * Using `replaceChild` to replace the existing child element with a new one. * Using `slice` and concatenating strings to build the text content. * Using a library like jQuery or a custom implementation that uses a different approach to update text content. It's worth noting that modern JavaScript engines, including those used by Firefox, have optimized implementations for these three methods, making them generally fast and efficient. However, the specific performance characteristics of each method may still vary depending on the use case and environment.
Related benchmarks
innerHTML vs innerText vs textContent
setting innerHTML vs innerText vs textContent
innerHTML vs innerText vs textContent 2
innerHTML vs innerText vs textContent with lower i
Comments
Confirm delete:
Do you really want to delete benchmark?