Benchmark: parseFromString vs cloneNode

Script Preparation code:

var markup = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g class="joint-port"/></svg>';

Tests:

createElement
var list = [], n = 0; while(true) { n++; list.push(new DOMParser().parseFromString(markup, 'text/xml')); if(n===1000) break; }
cloneNode
var list = [], n = 0, node = new DOMParser().parseFromString(markup, 'text/xml'); while(true) { n++; list.push(node.cloneNode(true)); if(n===1000) 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: 10 months ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createElement	94.6 Ops/sec
cloneNode	255.6 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 provided benchmark compares the performance of two approaches: `parseFromString` and `cloneNode`. The test case uses the `DOMParser` library, which parses XML or HTML strings into a DOM document.

**Options Compared**

The benchmark tests two options:

1. **`parseFromString`**: This method creates a new DOM document from an XML or HTML string.
2. **`cloneNode`**: This method creates a deep copy of a node in the DOM.

**Pros and Cons of Each Approach**

### `parseFromString`

Pros:

* Fast, as it only parses the input string into a DOM document
* Can be more efficient for large documents

Cons:

* Can lead to memory leaks if not properly cleaned up
* May not be suitable for all use cases, such as parsing HTML strings with complex structures

### `cloneNode`

Pros:

* Creates a deep copy of the original node, which can be useful in certain scenarios
* Does not consume any additional memory beyond what is already allocated by the original node

Cons:

* Can be slower than `parseFromString` due to the overhead of creating a new DOM document
* May lead to performance issues if used extensively

**DOMParser Library**

The `DOMParser` library is part of the W3C's DOM Standard. Its purpose is to parse XML or HTML strings into a DOM document that can be accessed and manipulated by JavaScript. The library provides methods for parsing different types of documents, such as `parseFromString` (for HTML and XML) and `parseText`.

**Other Considerations**

* **Browser Support**: Both approaches are supported by most modern browsers, but older versions may have limited or no support.
* **Performance Variance**: Performance can vary depending on factors like the complexity of the input string, the size of the DOM document, and the browser's implementation.

**Alternative Approaches**

Other approaches for creating new DOM elements could include:

1. Using the `Document.createElement` method to create a new element from scratch.
2. Utilizing a library like jQuery or React for DOM manipulation.
3. Implementing custom rendering logic using Web Workers or other techniques.

These alternatives may offer different trade-offs in terms of performance, memory usage, and complexity.

Related benchmarks:

parseFromString vs cloneNode (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 5 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):