Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs insertAdjacentHTML template
(version: 0)
Comparing performance of:
innerHTML vs insertAdjacentHTML
Created:
4 years ago
by:
Guest
Go to the latest result
Tests:
innerHTML
const template = document.createElement("template"); template.innerHTML = "<div></div>"
insertAdjacentHTML
const template = document.createElement("template"); template.insertAdjacentHTML("afterbegin", "<div></div>")
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerHTML
insertAdjacentHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Browser/OS:
Chrome 131 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=569417" width="100%" height="500px"></iframe>
innerHTML
155K/s
insertAdjacentHTML
151K/s
View exact numbers
Test name
Executions per second
✓
innerHTML
154,618 Ops/sec
insertAdjacentHTML
150,957 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **Benchmark Definition** The benchmark is designed to compare two approaches for rendering HTML templates in a browser: `innerHTML` and `insertAdjacentHTML`. The benchmark uses the `template` element, which is a Web Components API that allows creating and manipulating HTML templates. **Script Preparation Code** There is no script preparation code provided for this benchmark. This means that the JavaScript engine will create the template element and assign it to the `template` variable without any additional setup or initialization code. **Html Preparation Code** Similarly, there is no html preparation code provided for this benchmark. The HTML code for the test case is hard-coded directly into the `Benchmark Definition` JSON: ``` const template = document.createElement("template"); template.innerHTML = "<div></div>"; ``` or ``` const template = document.createElement("template"); template.insertAdjacentHTML("afterbegin", "<div></div>"); ``` **Individual Test Cases** There are two test cases in this benchmark: 1. **innerHTML**: This test case creates a new `template` element and assigns an HTML string to its `innerHTML` property. 2. **insertAdjacentHTML**: This test case also creates a new `template` element, but instead of assigning an HTML string to its `innerHTML` property, it uses the `insertAdjacentHTML` method to insert an HTML fragment into the template. **Library and Purpose** In this benchmark, the Web Components API (`template`) is used to create and manipulate HTML templates. The `template` element is a new addition to the Web Components API, introduced in Chrome 85 (released in March 2020). **Special JS Feature or Syntax** The benchmark uses the `insertAdjacentHTML` method, which was introduced in ECMAScript 2019 (ES11). This method allows inserting HTML fragments into an element without the need for `innerHTML` or other methods. **Pros and Cons of Different Approaches** 1. **innerHTML**: This approach is widely supported across browsers but can be slower due to the overhead of parsing and sanitizing user-supplied HTML. * Pros: Easy to use, well-supported by most browsers. * Cons: Can be slow, less efficient than other approaches. 2. **insertAdjacentHTML**: This approach provides better performance and efficiency compared to `innerHTML`, as it avoids parsing and sanitizing user-supplied HTML. * Pros: Faster, more efficient, and less error-prone. * Cons: May not be supported by older browsers. **Other Alternatives** Some other alternatives for rendering HTML templates in a browser include: 1. **DOM manipulation**: Using traditional DOM methods (e.g., `createElement`, `appendChild`) to build and render the HTML template. 2. **Shadow DOM**: Using Shadow DOM, which allows creating isolated DOM trees that can be used for templating purposes. However, Web Components API (`template`) is a popular choice for building reusable UI components and templates due to its simplicity and flexibility. **Additional Considerations** When choosing an approach for rendering HTML templates in a browser, consider factors such as: 1. **Browser support**: Ensure the chosen approach is supported by your target browsers. 2. **Performance**: Choose an approach that balances performance with ease of use and maintainability. 3. **Security**: Be aware of potential security risks associated with user-supplied HTML. I hope this explanation helps you understand what's being tested in MeasureThat.net!
Related benchmarks
createTextNode vs innerHTML vs innerText
Comments
Confirm delete:
Do you really want to delete benchmark?