Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
textContent vs innerHtml
(version: 0)
Benchmark.js
Comparing performance of:
textContent vs innerHtml
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='test'>Change me</div>
Tests:
textContent
let testElem = document.querySelector("#test"); let i = 2_000_000; while (i--) { testElem.textContent = "HAHAHAHAHA<br>BRBRBR</br>" }
innerHtml
let testElem = document.querySelector("#test"); let i = 2_000_000; while (i--) { testElem.innerHtml = "HAHAHAHAHA<br>BRBRBR</br>" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
textContent
innerHtml
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 134 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=594503" width="100%" height="500px"></iframe>
innerHtml
226/s
textContent
4/s
View exact numbers
Test name
Executions per second
✓
innerHtml
226 Ops/sec
textContent
4 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and the pros/cons of each approach. **Benchmark Definition** The benchmark is testing two approaches to update the text content of an HTML element: `textContent` and `innerHTML`. The benchmark definition is a JSON object that contains the script preparation code and HTML preparation code for each test case. **Script Preparation Code** In both cases, we have a variable `testElem` assigned using `document.querySelector("#test")`, which selects the `<div>` element with the ID "test". This suggests that the focus is on the DOM manipulation aspect of updating the text content, rather than any other JavaScript-related aspects like event handling or asynchronous operations. **Html Preparation Code** The HTML preparation code simply creates a `<div>` element with an ID of "test" and assigns it to `testElem`. **Test Cases** We have two test cases: 1. `textContent`: This test case uses the `textContent` property to update the text content of the selected element. 2. `innerHtml`: This test case uses the `innerHTML` property to update the HTML content of the selected element. **Options Compared** The benchmark is comparing the performance of these two approaches: using `textContent` versus using `innerHTML`. **Pros and Cons of Each Approach** 1. **textContent** * Pros: + Faster, as it only updates the text content without creating a new DOM element. + More lightweight, as it doesn't require parsing or escaping HTML tags. * Cons: + May not work correctly with certain types of content (e.g., HTML comments). 2. **innerHTML** * Pros: + Works with any type of content, including HTML comments. * Cons: + Slower, as it creates a new DOM element and parses the entire HTML string. + More resource-intensive, as it requires more memory to store the parsed HTML. **Library Usage** Neither test case explicitly uses any external libraries. However, `innerHTML` is often used in conjunction with libraries like jQuery or a custom implementation of `innerHTML`. **Special JS Features/Syntax** There are no special JavaScript features or syntax being tested or utilized in this benchmark. **Other Considerations** 1. **Browser Support**: The benchmark only shows results for Chrome 101 on Linux, which may not be representative of other browsers or platforms. 2. **DOM Manipulation**: This benchmark focuses on the performance of updating text content using `textContent` and `innerHTML`. Other aspects of DOM manipulation, like appending or removing elements, are not tested. **Alternative Approaches** Some alternative approaches to updating text content could include: * Using a templating engine like Handlebars or Mustache. * Utilizing a library like jQuery's `.html()` method or the `DOMPurify` library for sanitizing HTML content. * Implementing a custom solution using regex patterns or string manipulation functions.
Related benchmarks
jquery text vs js textContent
innerText vs innerHTML vs textContent
innerHTML vs textContent vs innerText
textContent vs innerHTML vs innerText
Comments
Confirm delete:
Do you really want to delete benchmark?