Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
append vs innerHTML 2
(version: 0)
Benchmark.js
append vs innerHTML 2
Comparing performance of:
innerHTML a vs innerHTML b vs append
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
innerHTML a
document.getElementById('test').innerHTML = '' let newDiv = '<div id="testing">' for (i = 0; i < 1000; i++) { newDiv += '<div class="testClass">dsfdsffjkdf</div>' } newDiv += '</div>' document.getElementById('test').innerHTML = newDiv
innerHTML b
document.getElementById('test').innerHTML = '' let newDiv = '<div id="testing">' for (i = 0; i < 1000; i++) { newDiv += '<div class="testClass">dsfdsffjkdf</div>' } newDiv += '</div>' document.getElementById('test').innerHTML += newDiv
append
document.getElementById('test').innerHTML = '' const newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { const newElementPart = document.createElement("div"); newElementPart.id = i newElementPart.classList.add("testClass"); newElementPart.appendChild(document.createTextNode('dsfdsffjkdf')); newElement.appendChild(newElementPart); } document.getElementById("test").append(newElement);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerHTML a
innerHTML b
append
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Browser/OS:
Safari 18 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=568387" width="100%" height="500px"></iframe>
innerHTML a
4K/s
innerHTML b
4K/s
append
1K/s
View exact numbers
Test name
Executions per second
✓
innerHTML a
4,410 Ops/sec
innerHTML b
4,378 Ops/sec
append
1,149 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of three different approaches: using `innerHTML` with concatenation, using `innerHTML` with appending, and using the `append()` method. **Test Cases** There are three individual test cases: 1. **`innerHTML a`**: This test case uses `innerHTML` to concatenate a string with 1000 iterations. 2. **`innerHTML b`**: This test case is similar to `innerHTML a`, but instead of assigning the result to `innerHTML`, it appends the new string to the existing `innerHTML`. 3. **`append`**: This test case creates an HTML element and appends 1000 child elements to it using the `append()` method. **Options Compared** The three test cases compare the performance of: * Using `innerHTML` with concatenation (`innerHTML a`) * Using `innerHTML` with appending (`innerHTML b`) * Using the `append()` method (`append`) **Pros and Cons of Each Approach** 1. **`innerHTML a`**: * Pros: Simple and widely supported. * Cons: Can be slow due to string concatenation, which creates a new string object on each iteration. 2. **`innerHTML b`**: * Pros: Reduces the number of DOM mutations compared to `innerHTML a`, which can improve performance. * Cons: Still uses `innerHTML`, which can lead to slower performance than using `append()` or creating elements directly. 3. **`append`**: * Pros: Fastest approach, as it only requires appending child elements without creating a new string object. * Cons: Requires creating an HTML element and its child elements, which can be more memory-intensive. **Library Used** There is no specific library used in these test cases. The benchmarking code uses native JavaScript features to compare the performance of different approaches. **Special JS Features or Syntax** None of the test cases use any special JavaScript features or syntax beyond standard ECMAScript syntax. **Other Alternatives** If you're looking for alternative approaches, consider the following: * Using `innerHTML` with a template engine (e.g., Mustache) can improve performance by reducing the number of DOM mutations. * Creating elements directly using `document.createElement()` and manipulating their properties can be faster than using `append()`. * Using a library like jQuery or React can provide additional performance optimizations, but may also introduce additional overhead. Keep in mind that the best approach depends on your specific use case and requirements. These benchmarks should serve as a general guideline for comparing different approaches.
Related benchmarks
JS: append vs appendChild
JS: insertBefore vs appendChild
JS: append vs appendChild multiple elements
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?