Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent ..
(version: 0)
Comparing performance of:
innerText vs textContent vs innerHtml
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!" }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerText
textContent
innerHtml
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15
Browser/OS:
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=500768" width="100%" height="500px"></iframe>
innerHtml
735K/s
textContent
7K/s
innerText
7K/s
View exact numbers
Test name
Executions per second
✓
innerHtml
735,234 Ops/sec
textContent
7,365 Ops/sec
innerText
6,645 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **Benchmark Overview** The benchmark measures the performance difference between three ways to update the text content of an HTML element: `innerText`, `textContent`, and `innerHTML`. The test case uses the `document.querySelector` method to retrieve a DOM element, which is updated repeatedly in a loop. **Options Comparison** 1. **innerText**: This option updates the text content using the `innerText` property. * Pros: + Fastest way to update text content (typically 2-4 CPU cycles). + Wide browser support. * Cons: + Can lead to inconsistent rendering in certain browsers. + May not work as expected with complex or nested HTML elements. 2. **textContent**: This option updates the text content using the `textContent` property. * Pros: + More consistent rendering across browsers compared to `innerText`. + Handles complex and nested HTML elements better than `innerText`. * Cons: + Slightly slower than `innerText` (typically 4-6 CPU cycles). 3. **innerHTML**: This option updates the inner HTML using the `innerHTML` property. * Pros: + Fastest way to update inner HTML (typically 2-4 CPU cycles). + Works well with complex and nested HTML elements. * Cons: + Can lead to security vulnerabilities if not sanitized properly. + May cause performance issues due to excessive DOM updates. **Library Usage** In this benchmark, the `document.querySelector` method is used to retrieve a DOM element. This method is part of the DOM API and is widely supported by modern browsers. It's not specific to any particular library. **Special JS Features or Syntax** None mentioned in the provided code snippet. However, if we consider the `innerText`, `textContent`, and `innerHTML` properties themselves, they are special features that allow for faster and more efficient text updates: * `innerText`: Introduced in ECMAScript 2015 (ES6), this property provides a fast and consistent way to update text content. * `textContent`: Also introduced in ECMAScript 2015 (ES6), this property is similar to `innerText` but has additional features for handling complex and nested HTML elements. * `innerHTML`: This property has been part of the DOM API since its inception, allowing for fast and efficient updates to inner HTML. **Other Alternatives** For those interested in exploring other alternatives: 1. **DOM Traversal**: Instead of using `document.querySelector`, you could use DOM traversal methods like `getElementsByTagName` or `getElementsByClassName` to update text content. 2. **Template Literals**: You could use template literals (e.g., `let el = document.querySelector('#hello'); el.innerHTML = 'Hello, World!';`) for faster and more efficient string concatenation. 3. **DOM Manipulation APIs**: Consider using modern DOM manipulation APIs like `DOMParser` or `XMLSerializer` for efficient text updates. Keep in mind that the choice of approach depends on your specific use case and performance requirements. This benchmark aims to provide a general understanding of the performance differences between these options.
Related benchmarks
innerHTML vs innerText vs textContent
setting innerHTML vs innerText vs textContent
innerHTML vs innerText vs textContent 3
innerHTML vs innerText vs textContent with lower i
Comments
Confirm delete:
Do you really want to delete benchmark?