Benchmark: Add styles via cloneNode vs. createElement

HTML Preparation code:

<head><style>h1 { color: red; }</style></head><body></body>

Script Preparation code:

var head = document.querySelector("head");
var node = document.querySelector("style");

Tests:

clodeNode
var clone = node.cloneNode({deep: true}) head.appendChild(clone);
createElement
var clone = document.createElement("style"); clone.textContent = node.textContent; head.appendChild(clone);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clodeNode
createElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 137 on Linux

View result in a separate tab

Test name	Executions per second
clodeNode	466.7 Ops/sec
createElement	447.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of two approaches to add styles to an HTML document:

1. **Clone Node**: Using `cloneNode()` method to create a copy of the existing `<style>` element, and then appending it to the `<head>` element.
2. **Create Element**: Creating a new `<style>` element using `document.createElement()`, setting its content to the original element's content using `textContent`, and then appending it to the `<head>` element.

**Options Compared**

The two approaches compared are:

* **cloneNode vs. createElement**: These are the two methods used to create a new copy of the existing `<style>` element.
* **Deep Clone (true) vs. Shallow Copy (false)**: The `cloneNode()` method allows for both deep and shallow clones. In this benchmark, the test uses a deep clone (`deep: true`).

**Pros and Cons**

1. **Clone Node**:
	* Pros:
		+ Can preserve more of the original element's structure and content.
		+ May be faster for complex elements or large documents.
	* Cons:
		+ Can lead to increased memory usage due to the creation of a new element tree.
2. **Create Element**:
	* Pros:
		+ Uses less memory since it creates a shallow copy of the element's content.
		+ May be faster for simple elements or small documents.
	* Cons:
		+ Preserves less of the original element's structure and content.

**Library**

The `cloneNode()` method is part of the DOM (Document Object Model) API, which is used to manipulate HTML documents. It allows creating a copy of an existing node in the document tree.

**Special JS Feature/Syntax**

None mentioned in this benchmark. However, it's worth noting that other JavaScript features like async/await or promise chaining might be used in more complex scripts, but they are not relevant to this specific benchmark.

**Other Alternatives**

If you want to explore alternative approaches, here are a few options:

* **innerHTML**: Instead of using `cloneNode()` or `createElement()`, you could use the `innerHTML` property to set the content of an element. However, be aware that this method can lead to security issues if used with untrusted data.
* **String interpolation**: You could also concatenate strings to create a new `<style>` element, like `"var clone = document.createElement('style'); clone.textContent = node.textContent; head.appendChild(clone);"`.

Keep in mind that the performance differences between these approaches might be negligible for simple use cases, but can add up for complex or large-scale applications.

Related benchmarks:

Add styles via cloneNode vs. createElement (version: 0)

Comparing performance of: clodeNode vs createElement

Created: 5 years ago by: Guest

Jump to the latest result

clodeNode

createElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):