Benchmark: range.createContextualFragment vs template.innerHtml

Script Preparation code:

var str = `<div>${Math.random().toString().slice(2)}</div>`;
var range = document.createRange();
var temp = document.createElement('template')
var res = '';
for(i=0; i<30000; i++){
	res += str
}

Tests:

createContextualFragment
var test1 = range.createContextualFragment(res)
innerHTML
temp.innerHTML = res var test2 = temp.content

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 26 runs

createContextualFragment

46/s

innerHTML

46/s

View exact numbers

✓ createContextualFragment: 46 ops/sec
• innerHTML: 46 ops/sec

Firefox 8 runs

createContextualFragment

64/s

innerHTML

50/s

Fastest: createContextualFragment (1.3x faster)

View exact numbers

✓ createContextualFragment: 64 ops/sec
• innerHTML: 50 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
createContextualFragment
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

createContextualFragment

81/s

innerHTML

70/s

View exact numbers

Test name	Executions per second
✓ createContextualFragment	81 Ops/sec
innerHTML	70 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**What is being tested?**

The provided JSON represents two microbenchmarks, each testing different approaches to create a contextual fragment in JavaScript.

1. `createContextualFragment`: This approach uses the `document.createRange()` method in conjunction with `document.createElement('template')` to create a contextual fragment.
2. `innerHTML`: This approach uses the `innerHTML` property of an element to assign a string value, which will automatically insert new nodes into the element's content.

**Options being compared**

The two options being compared are:

1. Using `createContextualFragment()` with a template
2. Using `innerHTML` with a string assignment

**Pros and Cons of each approach**

**`createContextualFragment()`**

Pros:

* Can be more efficient when working with large amounts of data, as it allows for incremental insertion of nodes.
* Can provide better performance for certain use cases, such as rendering HTML fragments.

Cons:

* Requires the creation of a template element, which can add overhead.
* May not be suitable for all scenarios, especially those that require explicit DOM manipulation.

**`innerHTML`**

Pros:

* Simple and straightforward to use, requiring minimal setup.
* Can be useful when working with existing HTML structures.

Cons:

* Can be slower than `createContextualFragment()` due to the overhead of inserting new nodes into the DOM.
* May not provide the same level of control over the rendering process as `createContextualFragment()`.

**Library used**

In this benchmark, the `template` element is used. The purpose of a `template` element is to allow for incremental insertion of HTML content without the need to create a new document fragment each time. When assigned an innerHTML value, the template's content is inserted into the DOM in a single operation.

**Special JavaScript feature or syntax**

The benchmark uses the `Math.random().toString().slice(2)` function to generate random strings for testing purposes. This function generates a string representation of a random number between 0 and 1, excluding the decimal point. The `slice(2)` method is then used to extract the numeric part of the string.

**Other alternatives**

Alternative approaches to creating contextual fragments or inserting HTML content into the DOM include:

* Using `DOMParser` to parse an HTML string and insert it into the DOM
* Using a library like jQuery's `.html()` function to set the innerHTML property
* Using a custom implementation with manual DOM manipulation

Keep in mind that each of these alternatives may have different performance characteristics, trade-offs, and use cases compared to `createContextualFragment()` or `innerHTML`.

range.createContextualFragment vs template.innerHtml (version: 0)

Comparing performance of: `createContextualFragment vs innerHTML`

Created: 4 years ago by: Guest

Go to the latest result

createContextualFragment

innerHTML

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 26 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

range.createContextualFragment vs template.innerHtml (version: 0)

Comparing performance of: createContextualFragment vs innerHTML

Created: 4 years ago by: Guest

Go to the latest result

createContextualFragment

innerHTML

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 26 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `createContextualFragment vs innerHTML`