Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
append vs appendChild + createTextNode
(version: 0)
Comparing performance of:
append vs appendChild + createTextNode
Created:
6 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:
append
container.append("text")
appendChild + createTextNode
container.appendChild(document.createTextNode("text"))
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
append
appendChild + createTextNode
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0
Browser/OS:
Firefox 123 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=499060" width="100%" height="500px"></iframe>
append
7K/s
appendChild + createTextNode
3K/s
View exact numbers
Test name
Executions per second
✓
append
6,582 Ops/sec
appendChild + createTextNode
2,625 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into explaining the provided JavaScript microbenchmark. **Benchmark Definition and Preparation Code** The benchmark definition is a JSON object that describes two test cases: `append` and `appendChild + createTextNode`. The `Script Preparation Code` section sets up a container element using JavaScript, while the `Html Preparation Code` section generates the HTML code for the container element. In this case, both preparation codes are simple and do not include any libraries or special JavaScript features. **Test Cases** The two test cases being benchmarked are: 1. `append`: This test case appends a string "text" to the container element using the `container.append("text")` method. 2. `appendChild + createTextNode`: This test case appends a string "text" to the container element by first creating a text node using `document.createTextNode("text")` and then appending it to the container element using `container.appendChild(document.createTextNode("text"))`. **Options Compared** The two test cases are comparing the performance of two different approaches: * Using the `append()` method directly on the container element. * Using the `appendChild()` method with a created text node. **Pros and Cons** **Append() Method:** Pros: * Simplistic and straightforward approach. * No additional memory allocation or object creation is required. Cons: * May not be optimized by the browser's DOM implementation for string append operations. * Could potentially lead to slower performance due to the overhead of direct method call on a node. **appendChild() with Created Text Node:** Pros: * Can take advantage of browser optimizations that specialize in text node append operations. * Allows for better memory management, as the text node is created and garbage collected when no longer needed. Cons: * Requires an additional object creation (the text node) and method call (`createTextNode()`). * May introduce slight overhead due to the creation of a new DOM object. **Other Considerations** * Both test cases use JavaScript's `document` object, which provides access to the Document Object Model (DOM). The browser will parse and execute the provided code when it encounters the `<html>` tag in the HTML document. * Both tests are designed to be simple and minimal, allowing for direct comparisons between different approaches. **Library Usage** None of the test cases explicitly uses any external libraries. However, JavaScript is a built-in language, and its behavior may vary depending on the browser implementation. **Special JS Features or Syntax (Not Mentioned)** Since no special JavaScript features or syntax are mentioned in the provided benchmark definition, there's nothing to explain here. **Alternatives** If you want to explore alternative approaches, consider the following: * **Other DOM Methods**: Experiment with other DOM methods like `innerHTML`, `textContent`, and `insertAdjacentHTML` to see if they offer performance advantages. * **DOM Patching Libraries**: Consider using a library like DOMPurify or jsdom to create a virtual document and test the performance of your code in a controlled environment. * **Benchmarking Frameworks**: Use frameworks like Benchmark.js, JSPerf, or Microbenchmark to write more complex benchmark tests and compare different approaches. Remember that benchmarking is an iterative process. Try running multiple iterations with different inputs and variations to ensure accurate results and conclusions.
Related benchmarks
JS: append vs appendChild
JS: insertBefore vs appendChild
createTextNode vs textContent vs innerText vs append
ParentNode.append() vs Node.appendChild() for adding a couple elements
Comments
Confirm delete:
Do you really want to delete benchmark?