Benchmark: createElement vs createContextualFragment

HTML Preparation code:

<div></div>

Tests:

createElement
const div = document.createElement('div') div.innerHTML = 'Hello'; return div.outerHTML;
createContextualFragment
const frag = document.createRange().createContextualFragment(`<div>Hello</div>`); const domNode = frag.firstElementChild; return domNode.outerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
createContextualFragment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 145 on Linux

View result in a separate tab

Test name	Executions per second
createElement	1602731.9 Ops/sec
createContextualFragment	299832.4 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark on MeasureThat.net compares two ways to create DOM elements in JavaScript:

**Method 1: `createElement`**

* **Code:**  The test uses `document.createElement('div')` to create a new `<div>` element, then sets its inner HTML to "Hello" and returns the outerHTML of the div.
* **Pros:** This method is straightforward and widely used. It's clear and easy to understand.

**Method 2: `createContextualFragment`**

* **Code:**  This method uses `document.createRange().createContextualFragment(`<div>Hello</div>`)` to create a fragment containing the `<div>` element with "Hello" inside. It then gets the first child of the fragment and returns its outerHTML.
* **Pros:** This approach can be more efficient, especially when creating multiple DOM elements at once, as it avoids immediately adding them to the document tree.

**Considerations:**

* **Performance:** The benchmark results show that `createElement` is significantly faster in this specific case. However, performance can vary depending on factors like browser, complexity of the HTML, and the overall context of your code.
* **DOM Manipulation:** `createContextualFragment` offers more control over how elements are inserted into the DOM. It's often used in scenarios where you need to build complex structures or manipulate existing content without immediately affecting the visible page.

**Alternatives:**

* **Virtual DOM Libraries:**  Libraries like React, Vue.js, and Angular use a virtual DOM representation to update the actual DOM efficiently. This can be significantly faster than directly manipulating the DOM for large applications. 
* **Template Literals (ES6):** For simpler HTML creation, template literals (` `` `) offer a concise and readable way to embed variables and expressions within strings.

Let me know if you have any other questions!

Related benchmarks:

createElement vs createContextualFragment (version: 0)

Comparing performance of: createElement vs createContextualFragment

Created: 6 years ago by: Guest

Jump to the latest result

createElement

createContextualFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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