Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs template clone (prefound template)
(version: 0)
Comparing performance of:
createElement vs template
Created:
one year ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
template
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618459" width="100%" height="500px"></iframe>
template
418K/s
createElement
387K/s
View exact numbers
Test name
Executions per second
✓
template
418,039 Ops/sec
createElement
386,660 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
customElements using Template cloneNode vs. innerHTML
Creating elements with cloneNode (template vs. normal element)
createElement vs cloneNode with option and fragment
Comments
Confirm delete:
Do you really want to delete benchmark?