Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent Retrieval
(version: 0)
Comparing performance of:
innerText vs innerHtml vs textContent
Created:
2 years ago
by:
Guest
Go 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--) { let text = el.innerText; }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { let text = el.innerHTML; }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { let text = el.textContent; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerText
innerHtml
textContent
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0
Browser/OS:
Firefox 129 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=536725" width="100%" height="500px"></iframe>
textContent
1.9M/s
innerHtml
1.9M/s
innerText
9K/s
View exact numbers
Test name
Executions per second
✓
textContent
1,936,039 Ops/sec
innerHtml
1,930,392 Ops/sec
innerText
8,785 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the benchmark. **What is being tested?** The provided JSON represents a JavaScript microbenchmark that tests the performance of three different ways to retrieve text content from an HTML element: `innerHTML`, `innerText`, and `textContent`. The benchmark uses the `document.querySelector` method to select an HTML element with the id "hello" and then retrieves the text content using each of these methods. **Options compared** The benchmark compares the execution time of the following three options: 1. **`innerHTML`**: This option returns the HTML content of the element, including tags and attributes. 2. **`innerText`**: This option returns only the text content of the element, without tags or attributes. 3. **`textContent`**: This option returns both the text content and the text within `<script>` and `<style>` elements. **Pros and Cons** Here are some pros and cons for each option: * **`innerHTML`**: + Pros: Returns all relevant information about the element's HTML structure. + Cons: Can be slow and inefficient, as it involves parsing the entire HTML document. * **`innerText`**: + Pros: Faster than `innerHTML`, as it only needs to retrieve the text content. + Cons: May not work correctly for elements with complex structures or nested tags. * **`textContent`**: + Pros: Returns both text content and relevant information about the element's structure, making it a good compromise between speed and accuracy. + Cons: Can be slower than `innerText`, as it needs to parse more HTML. **Library usage** None of the test cases use any external libraries or frameworks. The benchmark only relies on native JavaScript functionality. **Special JS features or syntax** The benchmark uses some special JavaScript features, such as: * **`while` loops**: Used to iterate over a large number of iterations (1000) for each test case. * **`document.querySelector`**: Used to select the HTML element with the id "hello". * **`let` and `const` declarations**: Used to declare variables and avoid polluting the global namespace. However, these features are not specific to any particular JavaScript version or syntax. They are standard features that have been part of JavaScript for a long time. **Other alternatives** If you want to improve this benchmark, here are some alternative options you could consider: * Use a more advanced benchmarking library like `benchmark.js` or `micro-benchmark`. * Add more test cases to cover different scenarios and edge cases. * Use a different measurement unit, such as milliseconds or nanoseconds, instead of seconds. * Consider using a more robust testing framework like Jest or Mocha. * Use parallel execution to run multiple test cases concurrently, which can speed up the benchmarking process. Keep in mind that these alternatives may require additional setup and configuration, but they can provide more accurate and reliable results.
Related benchmarks
innerHTML vs innerText vs textContent
innerText vs innerHTML (performance 3)
innerHTML vs innerText vs textContent ..
innerHTML vs innerText vs textContent with lower i
Comments
Confirm delete:
Do you really want to delete benchmark?