Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerText vs textContent + trim
(version: 0)
Comparing performance of:
textContent vs innerText
Created:
4 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var a = document.createElement('a'); a.textContent = "Text";
Tests:
textContent
a.textContent.trim();
innerText
a.innerText;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
textContent
innerText
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 146 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=627114" width="100%" height="500px"></iframe>
textContent
1.8M/s
innerText
1.7M/s
View exact numbers
Test name
Executions per second
✓
textContent
1,775,138 Ops/sec
innerText
1,707,231 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its components to understand what's being tested. **Benchmark Definition** The provided JSON defines two individual test cases, each representing a different approach to retrieving text content from an HTML element: `textContent` and `innerText`. In JavaScript, these two properties are often confused with each other. The main difference lies in how they handle whitespace and text normalization. * **textContent**: This property returns the raw content of an element without any whitespace normalization or text trimming. It preserves all whitespace characters, including spaces, tabs, and line breaks. * **innerText**: This property is similar to `textContent` but with some differences. According to the specification (ECMAScript 2015), `innerText` is supposed to return the content of an element without any whitespace normalization. However, some browsers may still apply basic text trimming or normalize whitespace. **Options Compared** The benchmark compares two approaches: 1. **textContent**: This approach preserves all whitespace characters. 2. **textContent + trim**: While not explicitly using `innerText`, this approach applies a common technique to remove leading and trailing whitespace from the result, making it more comparable to how `innerText` works in some browsers. **Pros and Cons** Here are the pros and cons of each approach: * **textContent**: * Pros: Preserves all whitespace characters, can be useful for precise text comparison. * Cons: May lead to less efficient execution times due to unnecessary whitespace handling. * **textContent + trim**: * Pros: More closely mimics how `innerText` works in some browsers and can provide more accurate results. * Cons: Applies additional processing, potentially affecting performance. **Library Considerations** There is no explicit library mentioned in the benchmark definition. However, it's essential to note that the behavior of `textContent` and `innerText` may vary across different JavaScript engines, browsers, or environments. Some libraries, like jQuery, might provide alternatives for these properties. For instance, jQuery offers `.text()` which returns the content of an element without any whitespace normalization, similar to `textContent`. However, this is not directly related to the benchmark being discussed. **Special JS Features or Syntax** There are no special JavaScript features or syntax mentioned in the benchmark definition. The focus is solely on comparing two different approaches for retrieving text content from HTML elements. **Other Alternatives** If you're interested in exploring other alternatives for text content retrieval, consider the following: * **innerHTML**: This property returns the HTML code of an element and can be more efficient than `textContent` or `innerText`, but it also includes markup tags and may not accurately represent just the text content. * **outerHTML**: Similar to `innerHTML`, this property returns the HTML code, including tags. However, unlike `innerHTML`, it does not remove the tags when set. When working with text content in JavaScript, choose the approach that best suits your specific requirements, considering factors like performance, accuracy, and the complexity of the application.
Related benchmarks
createTextNode vs textContent vs innerText
createTextNode vs textContent vs innerText vs innerHTML (for reading)
Comments
Confirm delete:
Do you really want to delete benchmark?