Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
append vs appendChild
(version: 0)
Benchmark.js
Comparing performance of:
appendChild vs append
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
var container = document.getElementById("container");
Tests:
appendChild
for (var i = 0; i < 100; i++) { container.appendChild(document.createTextNode(i.toString())); }
append
var arr = [] for (var i = 0; i < 100; i++) { arr.push(i.toString()) } container.append(arr)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
appendChild
append
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one month ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36 Edg/151.0.0.0
Browser/OS:
Chrome 151 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=633626" width="100%" height="500px"></iframe>
append
23K/s
appendChild
9K/s
View exact numbers
Test name
Executions per second
✓
append
23,231 Ops/sec
appendChild
9,013 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and its results to explain what's being tested, compared, and analyzed. **Benchmark Overview** The benchmark is designed to compare two approaches: `append` vs `appendChild`. The test creates an HTML container element with a unique ID (`"container"`), and then prepares a JavaScript script that will perform the following operations: 1. For each iteration of a loop (100 times), it appends a text node containing the string representation of the current iteration number to the container. 2. Another test case uses an array `arr` and pushes its elements (string representations of numbers) into the array, then appends the entire array as a single element to the container. **What's Being Tested** The benchmark is testing two aspects: 1. **Append vs AppendChild**: The primary comparison is between using the `append()` method directly on an HTML element and using the `appendChild()` method. These two methods are often used interchangeably, but they can have different performance implications. 2. **Array append vs Array.prototype.push + append()**: The secondary comparison is between using `push()` to add elements to an array and then appending the entire array to a container. **Options Compared** The benchmark is comparing: 1. Using `append()` directly on an HTML element 2. Using `appendChild()` method on an HTML element 3. Using `push()` to add elements to an array and then appending the entire array **Pros and Cons of Different Approaches:** 1. **Using `append()` directly**: This approach can be less efficient because it requires the browser to parse and interpret each appended string, which may lead to slower performance. * Pros: Simple and straightforward, easy to use for simple cases. * Cons: May incur overhead due to parsing and interpreting individual strings. 2. **Using `appendChild()` method**: This approach is generally more efficient than using `append()`, as it allows the browser to batch multiple operations together and optimize them. * Pros: Can be faster, especially when appending multiple elements, since browsers can optimize batches of append operations. * Cons: Requires careful consideration of the element's DOM structure, which might be less straightforward for simple cases. 3. **Using `push()` + append()**: This approach involves creating an array and pushing its elements into it, then appending the entire array to a container. * Pros: Can be efficient when dealing with large datasets, as it avoids parsing individual strings. * Cons: May incur overhead due to array creation and iteration, especially for large datasets. **Library and Special JS Features** The benchmark does not use any specific libraries or special JavaScript features beyond the standard DOM API. **Alternatives** Other alternatives for testing similar benchmarks might include: 1. Using `innerHTML` instead of `append()` or `appendChild()`. 2. Comparing performance with different container element sizes. 3. Testing with arrays of varying lengths and complexities (e.g., objects, dates). 4. Exploring browser-specific optimizations, such as WebAssembly or sandboxed environments. Keep in mind that these alternatives might be more complex to implement and may require additional setup, but they can provide valuable insights into the performance characteristics of different JavaScript operations.
Related benchmarks
append vs appendChild + createTextNode
JS: append vs appendChild
ParentNode.append() vs Node.appendChild() for adding a couple elements
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?