Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
JS: append vs appendChild - list of elements (1000 items)
(version: 0)
Benchmark.js
Comparing performance of:
append vs appendChild
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
var container = document.getElementById("container"); var paragraph = document.createElement("p"); var num = 1000;
Tests:
append
const elArray = new Array(1000).fill(paragraph); container.append(...elArray);
appendChild
for(let i = 0; i < 1000; i++) { container.appendChild(paragraph); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
append
appendChild
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; rv:120.0) Gecko/20100101 Firefox/120.0
Browser/OS:
Firefox 120 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=497925" width="100%" height="500px"></iframe>
append
5K/s
appendChild
3K/s
View exact numbers
Test name
Executions per second
✓
append
4,763 Ops/sec
appendChild
2,516 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net! The benchmark being tested is the performance difference between using the `append()` method and the `appendChild()` method when adding 1000 elements to an HTML paragraph element within a container. **What is being compared?** Two approaches are being compared: 1. **`append()`**: This method adds one or more elements to the end of the target container. In this benchmark, it's used to add an array of 1000 `p` elements to the container. 2. **`appendChild()`**: This method adds a single element to the end of the target container. In this benchmark, it's used to append each individual `p` element to the container one by one. **Pros and Cons:** * **`append()`**: + Pros: - Can be more efficient for adding multiple elements at once. - May use less memory, as it doesn't create intermediate arrays or objects. + Cons: - Can be slower than `appendChild()` when adding a single element per iteration, due to the overhead of creating and manipulating an array of elements. * **`appendChild()`**: + Pros: - Can be faster than `append()` for small numbers of elements being added one by one. - Allows for more control over the individual elements being added (e.g., setting attributes, styles, etc.). + Cons: - Requires creating intermediate objects and arrays, which can consume memory. **Library usage:** The benchmark uses the `document` object, specifically: * `document.getElementById()`: Retrieves an element by its ID. * `document.createElement()`: Creates a new element (in this case, a `p` element). * `appendChild()`: Adds a child node to the end of another element. **Special JavaScript feature or syntax:** None mentioned explicitly in the benchmark definition. However, it's worth noting that `fill()` is used to create an array of 1000 elements with the same value (the `paragraph` element). **Other alternatives:** If you wanted to test this benchmark using alternative approaches, here are a few ideas: * **Using `insertBefore()`**: Instead of appending or appending child nodes, use `insertBefore()` to add multiple elements before an existing element. * **Using a library like jQuery**: Instead of using vanilla JavaScript methods, use jQuery's `$()` function to select and manipulate elements. * **Using Web Workers**: Divide the work between multiple threads (Web Workers) to add elements in parallel, potentially improving performance. Keep in mind that these alternative approaches may require significant modifications to the benchmark code and might not accurately represent the original intent of the benchmark.
Related benchmarks
JS: append vs appendChild
JS: insertBefore vs appendChild
ParentNode.append() vs Node.appendChild() for adding a couple elements
JS: append vs appendChild multiple elements
Comments
Confirm delete:
Do you really want to delete benchmark?