Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs inserAdjacentHTML
(version: 0)
Comparing performance of:
innerHTML with var vs innerHTML with text vs innerHTML with template String
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
var text = 'check'
Tests:
innerHTML with var
document.getElementById('container').innerHTML = 'this is a ' + text
innerHTML with text
document.getElementById('container').innerHTML = 'this is a check'
innerHTML with template String
document.getElementById('container').innerHTML = `this is a ${text}`
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerHTML with var
innerHTML with text
innerHTML with template String
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested. **Benchmark Overview** The benchmark compares three approaches to set innerHTML of an HTML element: 1. `innerHTML` with variable interpolation (`var`) 2. `innerHTML` with string concatenation 3. `innerHTML` with template literals (template String) These tests aim to measure the performance difference between these approaches in various browsers. **Options Being Compared** The benchmark is comparing three options for setting innerHTML: 1. **Variable Interpolation (`var`)**: Using a variable to construct the string before setting it as innerHTML. 2. **String Concatenation**: Manually concatenating strings to form the final HTML content before setting it as innerHTML. 3. **Template Literals (template String)**: Using template literals to create the HTML content directly, which is then set as innerHTML. **Pros and Cons of Each Approach** Here's a brief overview: 1. **Variable Interpolation (`var`)**: * Pros: Simple and easy to read, especially for short strings. * Cons: May lead to performance issues if the variable contains complex logic or many string concatenations. 2. **String Concatenation**: * Pros: Allows for more control over the generated HTML content. * Cons: Can be verbose and less readable, especially for longer strings. 3. **Template Literals (template String)**: * Pros: Provides a concise way to create complex HTML content while still being readable. * Cons: May not work well with older browsers or environments that don't support template literals. **Library Used** None of the benchmark tests explicitly use any external libraries, but they do rely on JavaScript's built-in features and browser compatibility. **Special JS Features/Syntax** The benchmark uses: 1. **Template Literals (template String)**: Introduced in ECMAScript 2015 (ES6), these provide a convenient way to embed expressions inside string literals. 2. **Arrow Functions**: Not explicitly used, but arrow functions are not required for the benchmark's code. **Other Alternatives** If you're interested in exploring alternative approaches or optimizing innerHTML performance, consider: 1. **Using `textContent` instead of `innerHTML`**: When setting text content only, without HTML structure. 2. **Avoiding unnecessary reflows/repaints**: Optimize your code to minimize DOM manipulations and reduce the need for browser repaints. 3. **Utilizing browser-specific APIs or features**: Depending on the target browsers, you might find opportunities to use native APIs like WebAssembly, WebGL, or hardware acceleration. Keep in mind that these alternatives are not directly related to the specific benchmark comparison being discussed.
Related benchmarks:
createTextNode vs innerHTML vs innerText
innerText vs innerHtml
innerText vs innerHTML (performance 3)
innerText vs innerHTML vs textContent
Comments
Confirm delete:
Do you really want to delete benchmark?