Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
yoyo007
(version: 0)
uuujkj
Comparing performance of:
innerText vs textContent
Created:
2 years ago
by:
Guest
Jump 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!" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerText
textContent
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):
I'll break down the benchmark test and explain what's being tested, compared, and their pros and cons. **Benchmark Definition** The provided JSON represents a JavaScript microbenchmark definition. It consists of: * `Name`: The name of the benchmark. * `Description`: A brief description of the benchmark (not used in this case). * `Script Preparation Code`: A piece of JavaScript code that sets up the environment before running the benchmark. In this case, it selects an HTML element with the id "hello" and assigns it to a variable named `el`. * `Html Preparation Code`: The HTML code needed to create the environment for the benchmark. In this case, a simple `<div>` element is created with the id "hello" and contains the text "Hello, World!". **Individual Test Cases** The benchmark definition includes two test cases: * `innerText`: This test case measures the performance of setting the `innerText` property of an element. * `textContent`: This test case measures the performance of setting the `textContent` property of an element. These test cases are identical in terms of script preparation code and HTML preparation code, except for the specific property being tested (either `innerText` or `textContent`). **Library** There is no explicit library mentioned in the benchmark definition. However, it's worth noting that both `innerText` and `textContent` properties rely on the DOM API to interact with web pages. **Special JS Feature/Syntax** Neither of the test cases uses any special JavaScript features or syntax beyond what's considered standard (e.g., ES5/ES6 syntax). **Comparison Options** The two test cases are compared in terms of their performance when setting either `innerText` or `textContent`. The choice between these two properties can affect performance, as they may interact differently with the DOM and browser engines. Pros and Cons: * **innerText**: May be faster for small strings or simple text updates, but slower for longer strings or more complex text updates. + Pros: Can be a good choice when working with short strings or simple text updates. + Cons: May lead to inefficient string concatenation or repeated DOM mutations. * **textContent**: May be faster for larger strings or more complex text updates, as it allows for more efficient string pooling and DOM updates. + Pros: Can be a good choice when working with longer strings or more complex text updates. + Cons: May lead to slower performance when setting `innerText` in certain situations. **Other Alternatives** If the benchmark is intended to compare other aspects of element interaction (e.g., `innerHTML`, `offsetWidth`, etc.), additional test cases would be needed. The current benchmark focuses solely on `innerText` and `textContent`. Keep in mind that the performance differences between these two properties can vary depending on the specific use case, browser engine, and hardware configuration. When interpreting the latest benchmark results, you should consider the context of your project and choose the property that best fits your needs.
Related benchmarks:
querySelector vs querySelector 3
Pierre benchmark
Class Selector vs ID Selector vs Name aatr selector
SLEEK - Selector test
New css test
Comments
Confirm delete:
Do you really want to delete benchmark?