Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
innerHTML vs append vs hybrid
(version: 0)
Benchmark.js
Comparing performance of:
append vs innerHTML vs both
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
append
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement);
innerHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").innerHTML = html;
both
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").innerHtml = "<div id='testing'>" + newElement.innerHtml + "</div>";
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
append
innerHTML
both
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Browser/OS:
Chrome 122 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=511972" width="100%" height="500px"></iframe>
innerHTML
1K/s
both
620/s
append
596/s
View exact numbers
Test name
Executions per second
✓
innerHTML
1,272 Ops/sec
both
620 Ops/sec
append
596 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided benchmark. **Benchmark Overview** The benchmark compares the performance of three approaches for creating and manipulating HTML elements: 1. `innerHTML` 2. `append` (using `Document.append()` method) 3. Hybrid approach (not specified in the code, but implied by the name) **Options Compared:** * **innerHTML**: This approach involves setting the inner HTML of an existing element. + Pros: - Simple and efficient for creating new elements with a small amount of content. + Cons: - Can be slower for large amounts of data, as it requires parsing and concatenating strings. * **append**: This approach involves using the `Document.append()` method to add one or more child nodes to an existing element. + Pros: - Efficient for creating new elements with a large amount of content, as it avoids string parsing and concatenation. + Cons: - Requires creating a separate DOM node for each element being appended, which can lead to memory fragmentation. * Hybrid approach: This is not explicitly specified in the code, but based on the names of the test cases, it's likely that this approach involves using both `innerHTML` and `append` methods. **Library Used** In none of the provided benchmark definitions, a specific library is used. The benchmarks appear to be testing built-in browser functionality. **Special JS Feature/Syntax** None mentioned in the provided code. **Other Alternatives** If you're interested in exploring alternative approaches, here are some options: 1. **textContent**: This approach involves setting the text content of an existing element. 2. **DOM manipulation libraries**: There are several JavaScript libraries available that provide more efficient and modern DOM manipulation APIs, such as jQuery or Velocity.js. 3. **Template engines**: You could also use a template engine like Handlebars or Mustache to generate HTML templates. Keep in mind that these alternatives might not be directly comparable to the original benchmark, as they may involve different assumptions about your application's structure and requirements.
Related benchmarks
createTextNode vs innerHTML vs innerText
createElement vs cloneNode from DOM
JS: append vs appendChild
JS: append vs appendChild multiple elements
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?