Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
appendChild after getElementById (with cloneNode) vs appendChild after createElement (with cloneNode)
(version: 2)
Comparing performance of:
appendChild after getElementById (with cloneNode) vs appendChild after createElement (with cloneNode)
Created:
4 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<section id="container"></section>
Tests:
appendChild after getElementById (with cloneNode)
let container = document.getElementById("container"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = elem.cloneNode(); }
appendChild after createElement (with cloneNode)
let container = document.createElement("section"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = elem.cloneNode(); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
appendChild after getElementById (with cloneNode)
appendChild after createElement (with cloneNode)
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **Benchmark Definition** The benchmark is defined in JSON format, which provides information about the test case. The main details are: * **Name**: "appendChild after getElementById (with cloneNode) vs appendChild after createElement (with cloneNode)" * **Description**: None * **Script Preparation Code**: None * **Html Preparation Code**: A basic HTML structure with a `<section>` element, which will be used as the container for the test. **Test Cases** There are two individual test cases: 1. **AppendChild after getElementById (with cloneNode)** * The benchmark starts by getting a reference to the `container` element using `document.getElementById`. * Then, it creates a new element (`elem`) and appends it to the container using `appendChild`. This process is repeated 100 times. * After each append, the `elem` element is cloned using `cloneNode`. 2. **AppendChild after createElement (with cloneNode)** * The benchmark starts by creating a new container element (`container`) using `document.createElement`. * Then, it creates a new element (`elem`) and appends it to the container using `appendChild`. This process is repeated 100 times. * After each append, the `elem` element is cloned using `cloneNode`. **Options Compared** The two test cases are comparing the performance of: 1. **Getting an existing element reference (getElementById)** vs **Creating a new element reference (createElement)** 2. The overhead of cloning an element (`cloneNode`) after each append operation. **Pros and Cons** * **Get Element Reference**: Faster for elements that exist on the page, but slower if they don't exist. + Pros: Fast, efficient for existing elements + Cons: Slower for non-existent elements, may require extra checks * **Create New Element Reference**: Faster for creating new elements, but slower if an element already exists. + Pros: Fast, efficient for new elements + Cons: Slower for existing elements, may require more memory **Library and Special JS Features** Neither test case uses a library. There are no special JavaScript features or syntax mentioned. **Alternatives** If you wanted to create similar benchmarks, here are some alternatives: * Compare using `document.querySelector` instead of `getElementById` * Use `createElement` with different attributes (e.g., `createElement('div', { id: 'myDiv' })`) * Include multiple clone operations in each test case * Test the performance of other elements, such as `document.querySelector`, or use a library like jQuery **Benchmark Results** The latest benchmark results show that: * The first test case (`appendChild after createElement (with cloneNode)`) outperforms the second test case by about 10% on average. * Both test cases have high execution rates, indicating efficient performance. These results are specific to Firefox 91 on a Mac OS X 10.15 desktop. Other browsers and platforms may produce different results.
Related benchmarks:
append vs appendChild + createTextNode
createElement vs cloneNode from DOM
ParentNode.append() vs Node.appendChild() for adding a couple elements
append() vs appendChild() for moving a couple elements
Comments
Confirm delete:
Do you really want to delete benchmark?