Benchmark: createElement vs cloneNode

Tests:

createElement
var list = [], n = 0; while(true) { n++; list.push(document.createElement('div')); list[list.length-1].appendChild(document.createElement('div')); list[list.length-1].appendChild(document.createElement('div')); if(n===100000) break; }
cloneNode
var list = [], n = 0, node = document.createElement('div'); node.appendChild(document.createElement('div')); node.appendChild(document.createElement('div')); 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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
createElement	4.1 Ops/sec
cloneNode	11.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The benchmark in question compares the performance of two approaches for creating new complex DOM elements: `document.createElement` versus `node.cloneNode`.

**Options Compared**

The two options being compared are:

1. **createElement**: This method creates a new DOM element using the `document.createElement` function, which returns an empty element that can be customized and appended to other elements.
2. **cloneNode**: This method clones an existing DOM node (in this case, a `<div>` element) using the `node.cloneNode(true)` function, which returns a deep copy of the original node.

**Pros and Cons**

*   **createElement**:
    *   Pros: Creates a new, completely independent DOM element, allowing for more flexible customization.
    *   Cons: Can be slower than `cloneNode` because it requires parsing and serializing the element's attributes, styles, and child nodes.
*   **cloneNode**:
    *   Pros: Faster than `createElement` because it reuses the existing node's memory, reducing overhead.
    *   Cons: Creates a shallow copy of the original node, which may not be suitable for all use cases (e.g., when dealing with complex nodes).

**Library and Syntax**

In this benchmark, no libraries are used beyond the standard JavaScript DOM APIs.

There is no special JavaScript feature or syntax being tested in this benchmark.

**Other Alternatives**

If you're interested in exploring alternative approaches to creating DOM elements, consider the following options:

*   **document.getElementById`**: Creates a new element using an existing ID selector.
*   **innerHTML`/`outerHTML`: Create a new element by parsing and serializing HTML strings.
*   **DOMParser` and `XMLSerializer`: Can be used to parse and serialize XML documents, which can then be used to create DOM elements.

Keep in mind that these alternatives may not always provide better performance or more efficient results than the `createElement` and `cloneNode` methods.

Related benchmarks:

createElement vs cloneNode (version: 0)

Faster way to create new complex dom elements

Comparing performance of: createElement vs cloneNode

Created: 9 years ago by: Guest

Jump to the latest result

createElement

cloneNode

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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