Benchmark: cloneNode perf - MeasureThat.net

Script Preparation code:

var script = document.createElement("script")
script.id = "test-el"
script.setAttribute("nonce", "abc123")
script.src = "https://example.org"

Tests:

cloneNode - deep
var clone = script.cloneNode(true)
cloneNode - shallow
var clone = script.cloneNode()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode - deep
cloneNode - shallow

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
cloneNode - deep	1328172.8 Ops/sec
cloneNode - shallow	1380380.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

I'll break down the explanation into manageable parts.

**What is tested on the provided JSON?**

The benchmark measures the performance difference between two approaches to create new DOM elements: `cloneNode(true)` and `cloneNode()`. Specifically, it tests whether creating a deep clone of a script element using `cloneNode(true)` is faster than creating a shallow clone with `cloneNode()`.

**Options compared:**

1. **`cloneNode(true)`**: Creates a deep clone of the original element, including all its properties and child elements.
2. **`cloneNode()`**: Creates a shallow clone of the original element, only copying the properties that are directly present on the element.

**Pros and Cons:**

* **`cloneNode(true)`**:
	+ Pros: Preserves the original structure and attributes of the parent element, which can be useful in certain scenarios.
	+ Cons: Can lead to increased memory usage and slower performance due to the creation of a deep clone.
* **`cloneNode()`**:
	+ Pros: Faster and more memory-efficient than `cloneNode(true)`, as only direct properties are copied.
	+ Cons: May alter the original structure or attributes of the parent element, which can have unexpected consequences.

**Library usage:**

None is explicitly mentioned in this benchmark. However, it's worth noting that `document.createElement()` and `cloneNode()` are built-in JavaScript methods, so no external libraries are being used.

**Special JS feature or syntax:**

There is no special JavaScript feature or syntax used in this benchmark. The code simply demonstrates the usage of `cloneNode()` with different arguments.

**Alternative approaches:**

If you're looking for alternative ways to create new DOM elements, consider:

1. Using a library like jQuery's `.clone()` method, which can provide a more convenient and efficient way to clone elements.
2. Implementing a custom cloning function using the `Object.assign()` method or other techniques.

**Other considerations:**

Keep in mind that this benchmark only tests the performance difference between these two approaches within the context of creating new script elements. Depending on your specific use case, you may need to consider additional factors, such as:

* The size and complexity of the cloned element
* The frequency and type of cloning operations
* The available memory and CPU resources

By understanding the pros and cons of each approach, you can make informed decisions about which method best suits your needs.

Related benchmarks:

cloneNode perf (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: cloneNode - deep vs cloneNode - shallow

Created: 3 years ago by: Guest

Jump to the latest result

cloneNode - deep

cloneNode - shallow

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):