Benchmark: Compare createElement vs template String - 100 times

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>

Previous results

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

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):

LLMs can make mistakes. Check important info.

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 - 100 times (version: 0)

Comparing performance of: createElement vs template String

Created: 3 years ago by: Registered User

Jump to the latest result

createElement

template String

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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