Benchmark: createElement vs cloneNode w/ 3 children

Tests:

createElement
var list = [], n = 0; while(true) { n++; node = document.createElement('div'); node.appendChild(document.createElement('div')); node.appendChild(document.createElement('select')); node.appendChild(document.createElement('span')); list.push(node); if(n===100000) break; }
cloneNode
var list = [], n = 0, node = document.createElement('div'); node.appendChild(document.createElement('div')); node.appendChild(document.createElement('select')); node.appendChild(document.createElement('span')); while(true) { n++; list.push(node.cloneNode(true)); if(n===100000) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 21 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
createElement	5.1 Ops/sec
cloneNode	4.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):

LLMs can make mistakes. Check important info.

The benchmark you're examining focuses on comparing two methods for creating and managing DOM elements in JavaScript: `createElement` and `cloneNode`. Both methods are part of the Document Object Model (DOM) API, which provides a way to interact with and manipulate web pages.

### Overview of the Tests

1. **Test Name: createElement**
   - **Description**: This test involves creating a new `<div>` element and appending three child elements (`<div>`, `<select>`, and `<span>`) for each iteration, up to 100,000 iterations.
   - **Implementation**: It starts with an empty list and, in a loop, creates a new DOM element (`node`) every iteration, to which it appends three child elements, eventually pushing this `node` into an array (`list`).

2. **Test Name: cloneNode**
   - **Description**: This test begins by creating a single `<div>` element along with the same three children once. It then uses `cloneNode(true)` to create a deep copy of this node, effectively replicating the entire subtree (the div and its children) during each iteration, also up to 100,000 iterations.
   - **Implementation**: It initializes a single parent node with children outside the loop and then clones this initial node in each iteration, pushing the clones to the list.

### Comparison of Approaches

- **`createElement` (Pros & Cons)**:
  - **Pros**:
    - Freshly created elements can be customized for each iteration if needed.
    - More control over the properties and attributes of each individual element.
  - **Cons**:
    - Performance overhead due to repeated creating and appending of nodes.
    - More resource-intensive when many identical elements are needed, as it involves multiple DOM manipulations.

- **`cloneNode` (Pros & Cons)**:
  - **Pros**:
    - More efficient for creating multiple copies of the same element structure. One structure is set up initially, and clones are made from it.
    - Reduces overhead associated with repeatedly creating new element nodes from scratch.
  - **Cons**:
    - Clones may inadvertently maintain references to the original node’s event listeners or properties (though in this test, deep cloning prevents that issue).

### Benchmark Results

- The benchmark results show the number of executions per second:
  - For `createElement`: ~5.11 executions/second
  - For `cloneNode`: ~3.99 executions/second
- From the results, `createElement` outperforms `cloneNode` in creating new elements under the described conditions, which can be surprising because `cloneNode` is typically expected to be faster when creating identical nodes in bulk.

### Other Considerations

- **Memory Usage**: While performance is measured in terms of execution speed, memory usage is also a factor. Repeatedly creating elements may consume more memory than cloning a single instance, which could lead to memory leaks if not managed properly.
- **Browser and Environment**: Performance can vary across different browsers and platforms, demonstrating the importance of testing for the specific context in which the application will run.

### Alternatives

1. **DocumentFragment**: Another alternative that doesn't appear in these benchmarks, `DocumentFragment`, can be used as a lightweight container for temporary DOM manipulation. It's beneficial for batch appends, as changes made to a `DocumentFragment` do not affect the live DOM until it is appended all at once.
   
2. **JS Frameworks/Libraries**: There are numerous JavaScript libraries (like React, Vue, or Angular) that manage DOM manipulations more efficiently by utilizing virtual DOM concepts, where changes are batched and optimized behind the scenes.

3. **Templates or cloning directly from HTML strings**: For rapid creation of elements, some developers use HTML strings and methods such as `innerHTML`, or template literals, as a way to avoid multiple method calls.

In conclusion, this benchmark highlights the trade-offs between two commonly used DOM methods: `createElement` may be effective for dynamic and diverse content, while `cloneNode` offers a more efficient means of replicating consistent structures, and understanding when to use each method based on the requirements can improve performance in web applications.

Related benchmarks:

createElement vs cloneNode w/ 3 children (version: 1)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 21 days ago by: Guest

Jump to the latest result

createElement

cloneNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):