Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerText vs innerHtml
(version: 0)
Comparing performance of:
innerText vs innerHtml
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="el"></div>
Script Preparation code:
var el = document.getElementById('el')
Tests:
innerText
el.innerText = 'foo'
innerHtml
el.innerHTML = 'foo'
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerText
innerHtml
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15
Browser/OS:
Safari 16 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=564124" width="100%" height="500px"></iframe>
innerText
388K/s
innerHtml
105K/s
View exact numbers
Test name
Executions per second
✓
innerText
387,617 Ops/sec
innerHtml
104,525 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **Benchmark Purpose** The purpose of this benchmark is to compare the performance of two different ways to set text content on an HTML element: `innerText` and `innerHTML`. The goal is to determine which method is faster, more efficient, and/or better suited for a specific use case. **Options Compared** Two options are compared: 1. **innerText**: This approach sets the text content directly on the element using the `innerText` property. 2. **innerHTML**: This approach sets the HTML content of an element's inner HTML using the `innerHTML` property. **Pros and Cons of Each Approach** * **innerText**: + Pros: Typically faster, more efficient, and easier to parse than `innerHTML`. + Cons: May not be suitable for complex HTML structures or text that includes special characters (e.g., HTML tags). * **innerHTML**: + Pros: Suitable for complex HTML structures and text with special characters. + Cons: Generally slower and less efficient than `innerText`, as it involves parsing and compiling the HTML code. **Library Used** None of the provided benchmark code uses any external libraries. However, if we consider the fact that this is a web-based benchmark, we can assume that the browser's DOM API (Document Object Model) library is used implicitly. **Special JavaScript Features or Syntax** The benchmark code does not use any special JavaScript features or syntax. It only focuses on comparing two basic properties of an HTML element: `innerText` and `innerHTML`. **Other Considerations** * **DOM Updates**: When using `innerHTML`, the browser needs to parse and update the entire DOM tree, which can lead to slower performance for large or complex documents. * **Text Rendering**: The rendering of text on-screen involves additional processing steps, such as font metrics calculation and text layout. This may affect the performance difference between `innerText` and `innerHTML`. * **Browser Variability**: Results may vary across different browsers and devices due to differences in engine optimizations, rendering engines, or hardware capabilities. **Alternatives** Other alternatives for comparing string content manipulation in JavaScript might include: 1. **String concatenation vs. template literals**: A simple benchmark can compare the performance of concatenating strings using the `+` operator versus using template literals. 2. **DOM updates with and without lazy loading**: A more complex benchmark could explore how different approaches to DOM updates, such as lazy loading or batch updates, impact performance. Keep in mind that the choice of alternatives depends on the specific use case and requirements of your project.
Related benchmarks
innerText vs innerHTML (performance 3)
innerHTML vs textContent vs innerText
textContent vs innerHTML vs innerText
Comments
Confirm delete:
Do you really want to delete benchmark?