Benchmark: singular clone vs batch clone

Script Preparation code:

const DIV = document.createElement('div')
const SPN = document.createElement('span')
const BTN = document.createElement('button')
const INP = document.createElement('input')
const H2 = document.createElement('h2')
const H4 = document.createElement('h4')
const AX = document.createElement('a')
const UL = document.createElement('ul')
const LI = document.createElement('li')

Tests:

batch clone
let u0 = UL.cloneNode(true) let l0 = LI.cloneNode(true) let l1 = LI.cloneNode(true) let l2 = LI.cloneNode(true) u0.appendChild(l0) u0.appendChild(l1) u0.appendChild(l2) for (let i = 0; i < 200; ++i) { let ui = u0.cloneNode(true) let uj = ui.firstElementChild; let uk = uj.nextElementSibling; let ul = uk.nextElementSibling; }
singular clone
for (let i = 0; i < 200; ++i) { let u0 = UL.cloneNode(true) let l0 = LI.cloneNode(true) let l1 = LI.cloneNode(true) let l2 = LI.cloneNode(true) u0.appendChild(l0) u0.appendChild(l1) u0.appendChild(l2) }
querySelectorAll
let u0 = UL.cloneNode(true) let l0 = LI.cloneNode(true) let l1 = LI.cloneNode(true) let l2 = LI.cloneNode(true) u0.appendChild(l0) u0.appendChild(l1) u0.appendChild(l2) l0.dataset.f00='1'; l1.dataset.f00='2'; l2.dataset.f00='3'; for (let i = 0; i < 200; ++i) { let ui = u0.cloneNode(true) let uj = ui.querySelectorAll('[data-f00]'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
batch clone
singular clone
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
batch clone	8531.8 Ops/sec
singular clone	7707.4 Ops/sec
querySelectorAll	8017.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON compares two different approaches for cloning DOM nodes in JavaScript: **batch cloning** and **singular cloning**. Let's break down what each of these approaches entails, their pros and cons, and possible alternatives.

### Benchmark Overview

1. **Batch Clone**
   - **Test Definition**: In this approach, a single `ul` element (an unordered list) is created, and three `li` elements (list items) are appended to it. Then this list is cloned multiple times (200), which results in the entire structure being duplicated:
     ```javascript
     let u0 = UL.cloneNode(true)
     let l0 = LI.cloneNode(true)
     let l1 = LI.cloneNode(true)
     let l2 = LI.cloneNode(true)
     u0.appendChild(l0)
     u0.appendChild(l1)
     u0.appendChild(l2)

for (let i = 0; i < 200; ++i) {
        let ui = u0.cloneNode(true)
     }
     ```

2. **Singular Clone**
   - **Test Definition**: In this variant, a new `ul` and `li` elements are created within a loop for each iteration. Each iteration constructs the list structure from scratch:
     ```javascript
     for (let i = 0; i < 200; ++i) {
         let u0 = UL.cloneNode(true)
         let l0 = LI.cloneNode(true)
         let l1 = LI.cloneNode(true)
         let l2 = LI.cloneNode(true)
         u0.appendChild(l0)
         u0.appendChild(l1)
         u0.appendChild(l2)
     }
     ```

### Results Summary

The benchmark results indicate that the batch cloning method performs significantly better than singular cloning. Specifically, the batch clone achieved approximately **15,773 executions per second**, whereas the singular clone managed about **6,644 executions per second**. This means that creating one template and cloning it multiple times is a more efficient use of resources compared to recreating the template for each iteration.

### Pros and Cons

#### Batch Clone
- **Pros**:
  - **Efficiency**: Cloning the same nodes multiple times is generally faster, especially when a structure is complex or reused often.
  - **Lower Overhead**: Reduces the overhead of repeatedly constructing new objects, leading to lesser CPU time and memory allocation.
  
- **Cons**:
  - **Memory Usage**: If the cloned structure contains a lot of data or is large, it might consume more memory.
  
#### Singular Clone
- **Pros**:
  - **Simplicity**: Easier to read for those unfamiliar with more complex benchmarks and may work for scenarios where each iteration requires unique elements or properties.
  
- **Cons**:
  - **Performance**: Significantly slower due to repetitive creation of the same structure, leading to increased resource consumption.
  - **Potential for Error**: If the structure needs to change, this repetition could lead to mistakes where each instance needs to be managed manually.

### Alternatives

1. **Using Document Fragments**: If creating multiple similar elements, you could append them to a `DocumentFragment` first and then add this fragment to the DOM in one operation, enhancing performance over directly manipulating the DOM multiple times.

2. **Object Pooling**: For frameworks or applications where cloned elements are frequently created and destroyed, maintaining a pool of reusable objects can greatly enhance performance, reducing the need for constant creation and garbage collection.

3. **Library Support**:
   - **React/Vue.js**: These libraries manage DOM manipulation in a more efficient way using Virtual DOM, where updates are combined and minimal changes are made to the real DOM, improving performance with large or frequently changing sets of nodes.

In conclusion, this benchmark effectively highlights the significance of how cloning strategies impact performance in JavaScript. By preferring batch cloning methods over singular ones, developers can create applications that are more responsive and efficient without needing to overhaul their coding practices substantially.

Related benchmarks:

singular clone vs batch clone (version: 6)

Comparing performance of: batch clone vs singular clone vs querySelectorAll

Created: 5 months ago by: Registered User

Jump to the latest result

batch clone

singular clone

querySelectorAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):