var a = document.createElement('a'); a.innerText = 'text';
a.textContent
a.innerText
a.innerHTML
a.nodeValue
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
textContent | |
innerText | |
innerHTML | |
nodeValue |
Test name | Executions per second |
---|---|
textContent | 11126096.0 Ops/sec |
innerText | 8896677.0 Ops/sec |
innerHTML | 10393067.0 Ops/sec |
nodeValue | 20330006.0 Ops/sec |
Let's break down the provided benchmark JSON and explain what's being tested, compared, and the pros/cons of each approach.
Benchmark Definition
The test measures the performance (in executions per second) of getting the value of different properties on an HTML element: textContent
, innerText
, innerHTML
, and nodeValue
. The Script Preparation Code
sets up a new HTML element (a
) with the text "text".
Test Cases
Each test case represents one of the four properties being measured:
Comparison
The benchmark compares the performance of accessing these four properties on a single element (a
).
Pros and Cons of Each Approach
innerHTML
, as it excludes surrounding whitespace and tags.textContent
and innerText
, as it needs to parse and evaluate the HTML content.Libraries and Special JavaScript Features
None of these properties rely on specific libraries or features. They are all standard JavaScript properties that work across most modern browsers.
Alternatives
If you need to benchmark different approaches for accessing HTML element values, consider testing:
outerHTML
(returns the entire HTML content of the element)text
: ( returns the text content of an element's child nodes)Keep in mind that these alternatives may have different performance characteristics and use cases compared to the properties measured in this benchmark.
In summary, this benchmark measures the performance of accessing four different properties on a single HTML element. The results provide insight into which approach is fastest for common web development tasks.