var a = document.createElement('a');
a.appendChild(document.createTextNode('text'));
a.textContent = 'text';
a.innerText = 'text';
a.innerHTML = 'text';
a.nodeValue = 'text';
a.innerContent = 'text';
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
createTextNode | |
textContent | |
innerText | |
innerHTML | |
nodeValue | |
innerContent |
Test name | Executions per second |
---|---|
createTextNode | 1196146.5 Ops/sec |
textContent | 5247276.0 Ops/sec |
innerText | 1080058.9 Ops/sec |
innerHTML | 384940.7 Ops/sec |
nodeValue | 7006807.0 Ops/sec |
innerContent | 15774213.0 Ops/sec |
Let's dive into the provided benchmark definition and analyze what's being tested, compared options, pros and cons, library usage, special JS features or syntax, and alternatives.
What is being tested?
The provided benchmark tests six different ways to set text content for an HTML element:
createTextNode
: Creating a new text node using the document.createTextNode()
method.textContent
: Setting the textContent
property of the element directly.innerText
: Setting the innerText
property of the element (note: this is specific to Internet Explorer).innerHTML
: Setting the innerHTML
property of the element, which includes both text and HTML content.nodeValue
: Setting the nodeValue
property of the element (only applicable for Node objects).innerContent
: There is no standard JavaScript property called innerContent
. It's possible that this is a custom or proprietary property used by the browser or library being tested.Comparison options
The benchmark compares the performance of each method:
createTextNode
textContent
innerText
(only applicable for Chrome 96 on Mac OS X)innerHTML
nodeValue
Pros and cons:
alt
attribute).document.createTextNode()
) and may not work correctly with HTML elements.Library usage
There are no libraries explicitly mentioned in the benchmark definition. However, some browsers like Chrome 96 on Mac OS X use proprietary properties or methods that might be specific to those environments. For example:
innerText
is a property used by Internet Explorer.innerContent
property seems to be specific to the browser's internal implementation.Special JS features or syntax
None of the provided benchmark definitions rely on special JavaScript features or syntax beyond standard ECMAScript.