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;

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 11 runs

createElement

1.0M/s

createContextualFragment

190K/s

Fastest: createElement (5.5x faster)

View exact numbers

✓ createElement: 1,040,663 ops/sec
• createContextualFragment: 190,330 ops/sec

Firefox 5 runs

createElement

1.2M/s

createContextualFragment

383K/s

Fastest: createElement (3.3x faster)

View exact numbers

✓ createElement: 1,247,678 ops/sec
• createContextualFragment: 382,694 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Windows

View result in a separate tab

createElement

999K/s

createContextualFragment

319K/s

View exact numbers

Test name	Executions per second
✓ createElement	999,090 Ops/sec
createContextualFragment	319,102 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark test case.

**Benchmark Name and Description**
The name of this benchmark is "createElement vs createContextualFragment". This suggests that we're comparing two different approaches to creating HTML elements: `document.createElement` and `document.createContextualFragment`.

**Html Preparation Code**
The HTML preparation code is simply `<div></div>`. This code creates a basic HTML structure with a single `<div>` element.

**Individual Test Cases**

We have two test cases:

1. **createElement**: This test case uses the `document.createElement` method to create an HTML element.
	* The JavaScript code creates a new `<div>` element using `document.createElement('div')`.
	* It then sets the innerHTML of the div element to "Hello".
	* Finally, it returns the outerHTML of the div element (i.e., the full HTML string including the opening and closing tags).
2. **createContextualFragment**: This test case uses the `document.createRange().createContextualFragment` method to create an HTML fragment.
	* The JavaScript code creates a new range using `document.createRange()`.
	* It then creates an HTML fragment using the `createContextualFragment` method, passing in a string of HTML: `<div>Hello</div>`.
	* It extracts the first child element of the fragment (which is the div element) and returns its outerHTML.

**Benchmark Results**

The benchmark results show two rows:

1. **createElement**: This test case runs at approximately 1835941 executions per second on a Firefox 125 browser on Linux.
2. **createContextualFragment**: This test case runs at approximately 601615 executions per second on the same Firefox 125 browser on Linux.

**Comparison and Analysis**

Based on these results, we can see that `document.createElement` is significantly faster than `document.createContextualFragment` for creating a single HTML element.

The pros of using `document.createElement` are:

* Faster execution time
* Simple to use

The cons are:

* Requires more manual work (e.g., setting innerHTML)

On the other hand, the pros of using `document.createContextualFragment` are:

* More concise code
* Can create fragments with multiple elements

However, the con is that it's slower than `document.createElement`.

**Other Alternatives**

There are other ways to create HTML elements in JavaScript. Some alternatives include:

1. **String concatenation**: You can manually concatenate strings to create HTML elements.
```javascript
const div = '<div>Hello</div>';
```
However, this approach is less concise and may lead to more errors.

2. **Using libraries or frameworks**: Depending on the specific use case, you might want to consider using a library or framework that provides a better way to handle HTML creation, such as JSX (JavaScript XML) or React.

**Library Mentioned**

In this test case, there is no explicit mention of any library being used. However, if we were to compare `document.createElement` with `React.createElement`, for example, the analysis would change significantly.

Please let me know if you'd like me to expand on any specific point!

createElement vs createContextualFragment (version: 0)

Comparing performance of: `createElement vs createContextualFragment`

Created: 6 years ago by: Guest

Go to the latest result

createElement

createContextualFragment

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 11 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

createElement vs createContextualFragment (version: 0)

Comparing performance of: createElement vs createContextualFragment

Created: 6 years ago by: Guest

Go to the latest result

createElement

createContextualFragment

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 11 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Related benchmarks

Comparing performance of: `createElement vs createContextualFragment`