Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Compare createElement vs template String - 100 times
(version: 0)
Comparing performance of:
createElement vs template String
Created:
3 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<div id="div"></div>
Script Preparation code:
function createElement(options) { const { element, classes, id, href, attributes, text, } = options; const currentElement = document.createElement(element); if (typeof classes !== 'undefined') currentElement.className = classes; if (typeof id !== 'undefined') currentElement.id = id; if (typeof href !== 'undefined') currentElement.href = href; if (typeof attributes !== 'undefined') attributes.forEach((el) => currentElement.setAttribute(el.name, el.value)); if (typeof text !== 'undefined') currentElement.innerHTML = text; return currentElement; }; function createEmptySelect(placeholder, stepNumber) { const selectWrapper = createElement({ element: 'div', classes: (stepNumber === 1) ? 'adv_search__select --active' : 'adv_search__select', }); const selectButton = createElement({ element: 'button', classes: 'adv_search__button', attributes: [{ name: 'type', value: 'button' }], }); const selectButtonIndex = createElement({ element: 'span', classes: 'adv_search__button_index', text: stepNumber, }); const selectButtonContent = createElement({ element: 'span', classes: 'adv_search__button_content', attributes: [{ name: 'data-placeholder', value: placeholder }], text: placeholder, }); const selectMenu = createElement({ element: 'div', classes: 'adv_search__menu', }); selectButton.appendChild(selectButtonIndex); selectButton.appendChild(selectButtonContent); selectWrapper.appendChild(selectButton); selectWrapper.appendChild(selectMenu); return selectWrapper; }; const div = document.getElementById('div');
Tests:
createElement
for(i=1; i < 100; i++) {div.appendChild(createEmptySelect('aaa', i));}; div.innerHTML = '';
template String
for(i=1; i < 100; i++) {div.innerHTML += `<div class="${(i === 1) ? 'adv_search__select --active' : 'adv_search__select'}"><button class="adv_search__button" type="button"><span class="adv_search__button_index">${i}</span><span class="adv_search__button_content" data-placeholder="aaa">aaa</span></button><div class="adv_search__menu"></div></div>`}; div.innerHTML = '';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
template String
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:128.0) Gecko/20100101 Firefox/128.0
Browser/OS:
Firefox 128 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
createElement
449.9 Ops/sec
template String
8.7 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll provide an explanation of the benchmark, its options, pros and cons, library usage, special JavaScript features or syntax, and alternative approaches. **Benchmark Overview** The MeasureThat.net benchmark compares the performance of two methods to create HTML elements: `createElement` (using the DOM API) and template literals (template String). **Options Compared** 1. **createElement**: This method uses the Document Object Model (DOM) API to create an element. It takes an options object as a parameter, which contains various attributes such as the element type, classes, ID, href, attributes, text content. 2. **Template Literals (template String)**: This method uses template literals to create HTML elements. It involves concatenating strings using backticks and embedding expressions inside them. **Pros and Cons** 1. **createElement**: * Pros: + More flexible and powerful than template literals for complex element creation. + Can be used with various libraries and frameworks that support DOM manipulation. * Cons: + Requires more code to create a single element, especially when dealing with multiple elements. + May have performance overhead due to the DOM API's overhead. 2. **Template Literals (template String)**: * Pros: + Fast and efficient for simple HTML creation. + Easy to read and write, as it resembles plain JavaScript code. * Cons: + Less flexible than `createElement` for complex element creation. + May not be suitable for large-scale applications due to its limitations. **Library Usage** In the benchmark, the library used is Ecosia Android API (version 119.0.0). This library likely provides additional functionality and optimizations for Android devices. **Special JavaScript Features or Syntax** There are no special JavaScript features or syntax mentioned in this benchmark. However, template literals are a relatively recent feature introduced in ECMAScript 2015 (ES6). **Alternative Approaches** 1. **JS DOM libraries**: Instead of using `createElement`, you could use popular JS DOM libraries like jQuery, React, or Angular to create elements. 2. **String manipulation libraries**: For template literals, you could explore other string manipulation libraries like Underscore.js or Lodash. 3. **V8-specific optimizations**: If you're targeting Chrome and want to optimize your code for V8's Just-In-Time (JIT) compiler, you might consider using V8-specific features and optimizations. In summary, the benchmark compares two methods for HTML element creation: `createElement` and template literals. The pros and cons of each approach are discussed, along with library usage and special JavaScript features or syntax. Alternative approaches are also mentioned to provide a more comprehensive understanding of the topic.
Related benchmarks:
Compare createElement vs template String
Compare createElement vs template String - 5 times
Compare method createElement vs string template using insertAdjacentHtml
createElement vs template clone (prefound template)
Comments
Confirm delete:
Do you really want to delete benchmark?