Benchmark: createTextNode vs cloneNode

Tests:

createTextNode
var list = [], n = 0; while(true) { n++; list.push(document.createTextNode('hello, world!')); if(n===100000) break; }
cloneNode
var list = [], n = 0, node = document.createTextNode('empty'); while(true) { n++; t = node.cloneNode(true); t.textContent = 'hello, world'; list.push(t); if(n===100000) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
cloneNode

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 100 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createTextNode	17.9 Ops/sec
cloneNode	10.0 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of creating text nodes in HTML documents using two different methods: `createTextNode` and `cloneNode`.

**Method 1: `createTextNode`**

* **Definition:** This approach directly creates new text nodes using the `document.createTextNode()` method for each iteration of a loop.  
* **Code Example:**
   ```javascript
   while(true) {
       n++;
       list.push(document.createTextNode('hello, world!')); 
       if(n===100000) break;
   }
   ```

**Method 2: `cloneNode`**

* **Definition:** This method first creates a single text node ("empty") and then repeatedly clones it using `node.cloneNode(true)`. Each clone's content is then updated to "hello, world!".
* **Code Example:**
   ```javascript
   while(true) {
       n++;
       t = node.cloneNode(true);
       t.textContent = 'hello, world'; 
       list.push(t);
       if(n===100000) break;
   }
   ```

**Pros and Cons:**

| Method | Pros                                 | Cons                                    |
| ------ | ------------------------------------- | ----------------------------------------- |
| `createTextNode` | Simpler to understand, potentially faster for smaller numbers of nodes. | Can be less efficient for large numbers of nodes as it involves multiple calls to the DOM API. |
| `cloneNode` | More efficient for larger numbers of nodes as cloning avoids repeated DOM manipulations.| Slightly more complex due to the need for a pre-existing node and content manipulation.  |

**Considerations:**

* **DOM Complexity:** Both methods interact with the Document Object Model (DOM), which can be computationally expensive, especially for large web pages.

* **Memory Usage:** Creating many new nodes can increase memory consumption. 
* **Context:** The best approach depends on the specific use case. If you need to create many text nodes quickly and efficiently, `cloneNode` might be preferable. However, if simplicity is more important or the number of nodes is small, `createTextNode` could be sufficient.

**Alternatives:**

* **Template Literals (for string concatenation):** Use template literals (` `` `)  to construct strings more efficiently than traditional methods like `+`.
* **Pre-generating Nodes Offscreen:** Create nodes in a separate document fragment to avoid direct DOM manipulation during page rendering.

Let me know if you have any other questions!

Related benchmarks:

createTextNode vs cloneNode (version: 0)

Comparing performance of: createTextNode vs cloneNode

Created: 4 years ago by: Guest

Jump to the latest result

createTextNode

cloneNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):