<div id='hello'>Hello, World!</div>
let el = document.querySelector("#hello");
let i = 1000;
const el = document.getElementById("hello");
while (i--) {
el.innerText = "Goodbye, cruel world!"
}
let i = 1000;
const el = document.getElementById("hello");
while (i--) {
el.innerHtml = "Goodbye, cruel world!"
}
let i = 1000;
const el = document.getElementById("hello");
while (i--) {
el.textContent = "Goodbye, cruel world!"
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
innerText | |
innerHtml | |
textContent |
Test name | Executions per second |
---|---|
innerText | 835.0 Ops/sec |
innerHtml | 312274.4 Ops/sec |
textContent | 1413.9 Ops/sec |
Let's break down the provided JSON for the MeasureThat.net benchmark.
Benchmark Definition
The benchmark compares three different ways to update the text content of an HTML element in JavaScript: innerHtml
, innerText
, and textContent
.
Options Compared
innerHtml
: Sets the inner HTML of an element, including the HTML tags.innerText
: Sets the text content of an element without including the HTML tags.textContent
: Sets the text content of an element, which can include HTML tags.Pros and Cons
innerHtml
when dealing with user-inputted data, as it prevents HTML injection. Cons: may not be suitable for cases where you need to update the entire HTML structure.innerHtml
and innerText
, as it allows HTML tags but still prevents most security issues. Cons: can lead to performance issues if the element's text content is large.Library Used
None, this benchmark does not use any external libraries.
Special JS Feature or Syntax
There are no special JavaScript features or syntax used in this benchmark.
Other Considerations
The benchmark assumes that the test HTML elements have a id
attribute set to "hello". The test code also uses document.querySelector()
and document.getElementById()
to retrieve the element by its ID.
Alternatives
If you want to write similar benchmarks, you can consider testing other JavaScript APIs or features, such as:
appendChild()
, removeChild()
)addEventListener()
, removeEventListener()
)getComputedStyle()
, requestAnimationFrame()
)Keep in mind that the performance and security implications of different JavaScript features can vary greatly depending on the context, so it's essential to consider these factors when writing benchmarks.