Benchmark: createElement vs template clone (prefound template)

HTML Preparation code:

  <body>
    <template id="option-template">
      <option>Sample Option</option>
    </template>
  </body>

Script Preparation code:

window.template = document.getElementById('option-template');

Tests:

createElement
const option = document.createElement('option'); option.id = `option-${i}`; option.setAttribute('data-foo', 'bar'); option.selected = true; option.textContent = 'aaaa';
template
const clonedOption = template.content.firstElementChild.cloneNode(true); clonedOption.id = `option-${i}`; clonedOption.setAttribute('data-foo', 'bar'); clonedOption.selected = true; clonedOption.textContent = 'aaaa';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
template

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Linux

View result in a separate tab

Test name	Executions per second
createElement	386660.0 Ops/sec
template	418038.6 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 provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches to create an `<option>` element:

1. `createElement`: Using the `document.createElement()` method to create a new HTML element.
2. `template clone`: Using a pre-filled template (`<option>Sample Option</option>`) cloned using the `cloneNode(true)` method.

**Options Compared**

The two options are being compared in terms of their performance, specifically:

* Creation time: How long it takes to create a single `<option>` element using each approach.
* Number of executions per second: The number of times each approach can execute 1,000,000 iterations within a second (ExecutionsPerSecond value).

**Pros and Cons**

Here are some pros and cons for each approach:

* `createElement`:
	+ Pros:
		- Simple and widely supported
		- No dependencies on external templates or libraries
	+ Cons:
		- May require more processing power due to the need to create a new element object
* `template clone`:
	+ Pros:
		- Can be faster since it reuses an existing template element
		- May be beneficial for large datasets where creating many elements would be slower
	+ Cons:
		- Requires access to pre-filled templates, which may not be available in all situations
		- Adds dependency on external templates or libraries

**Library**

In this benchmark, the `template` library is used. Specifically, it's using the `document.getElementById()` method to retrieve a pre-filled template element and then cloning that element using the `cloneNode(true)` method.

**Special JS Feature/Syntax**

This benchmark doesn't use any special JavaScript features or syntax beyond what's standard in modern browsers (ECMAScript 2015+). It only relies on basic DOM manipulation and string concatenation.

**Other Alternatives**

If you want to create an `<option>` element, there are other approaches you could consider:

* Using a library like jQuery or Lodash, which provide additional utility methods for working with HTML elements.
* Creating the option element as part of a larger HTML template using a framework like React or Angular.
* Using a binary search algorithm to find the optimal way to create multiple option elements.

Keep in mind that these alternatives might not be necessary depending on your specific use case and requirements. The `createElement` vs `template clone` comparison is primarily relevant for understanding the performance characteristics of each approach in general, rather than as an exhaustive solution for creating `<option>` elements.

Related benchmarks:

createElement vs template clone (prefound template) (version: 0)

Comparing performance of: createElement vs template

Created: one year ago by: Guest

Jump to the latest result

createElement

template

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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