Benchmark: createContextualFragment vs 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 t1 = new Date().now var test1 = range.createContextualFragment(res)
InnerHtml
temp.innerHTML = res var test2 = temp.content

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

createContextualFragment

37/s

InnerHtml

33/s

Fastest: createContextualFragment (1.1x faster)

View exact numbers

✓ createContextualFragment: 37 ops/sec
• InnerHtml: 33 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 year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Mac OS X 10.15

View result in a separate tab

createContextualFragment

50/s

InnerHtml

41/s

View exact numbers

Test name	Executions per second
✓ createContextualFragment	50 Ops/sec
InnerHtml	41 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is tested?**

The provided JSON represents two benchmark test cases:

1. `createContextualFragment`: Measures the performance of using `Document.createRange().createContextualFragment()` to insert a large amount of HTML content.
2. `InnerHtml`: Measures the performance of setting `innerHTML` on an element and then accessing its `content` property.

**Options compared**

In both test cases, we have two options:

a) Using `createContextualFragment()`
b) Using `innerHTML`

These are the fundamental approaches being compared in each benchmark. The choice between these two methods has implications for performance, code readability, and potential browser compatibility issues.

**Pros and cons of each approach**

1. **createContextualFragment()**:
	* Pros:
		+ Can be more efficient for large amounts of HTML content, as it avoids the overhead of parsing and re-parsing the entire HTML document.
		+ Allows for better control over the insertion point and fragment handling.
	* Cons:
		+ May not work in older browsers or those with limited support for the `createRange()` API.
		+ Can be more complex to use, especially for developers unfamiliar with the `Document` API.
2. **innerHTML**:
	* Pros:
		+ Widely supported across most modern browsers and versions.
		+ Simple and intuitive to use.
	* Cons:
		+ May incur a performance penalty due to the parsing and re-parsing of HTML content.
		+ Limited control over the insertion point and fragment handling.

**Other considerations**

1. **Browser compatibility**: The `createContextualFragment()` approach may not work in older browsers or those with limited support for the `createRange()` API. On the other hand, using `innerHTML` ensures wide browser compatibility.
2. **Code readability and maintainability**: Using `createContextualFragment()` can make code more readable and maintainable, as it provides a clear and explicit way to insert HTML content. In contrast, relying on `innerHTML` might lead to less readable code, especially when dealing with complex fragment insertion scenarios.

**Library usage**

In this benchmark, there is no library being used explicitly. However, the `createRange()` API is part of the W3C's DOM Standard and is widely supported across modern browsers.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes being used in these benchmark test cases. The code is written in vanilla JavaScript and relies on standard DOM APIs.

**Alternatives to MeasureThat.net**

If you're interested in exploring similar benchmarking tools, consider the following alternatives:

1. **jsperf**: A classic JavaScript performance benchmarking tool that allows users to create and share benchmarks.
2. **Benchmark.js**: A modern benchmarking library for Node.js and browser environments.
3. **Benchmark.com**: A cloud-based platform for creating, running, and sharing benchmarks.

Keep in mind that each of these alternatives has its own strengths and weaknesses, so it's essential to choose the tool that best fits your specific needs and requirements.

createContextualFragment vs InnerHtml (version: 4)

Comparing performance of: `createContextualFragment vs InnerHtml`

Created: 6 years ago by: Registered User

Go to the latest result

createContextualFragment

InnerHtml

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

createContextualFragment vs InnerHtml (version: 4)

Comparing performance of: createContextualFragment vs InnerHtml

Created: 6 years ago by: Registered User

Go to the latest result

createContextualFragment

InnerHtml

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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`