Benchmark: Compare createElement vs template String - 5 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 < 5; i++) {div.appendChild(createEmptySelect('aaa', i));}; div.innerHTML = '';
template String
for(i=1; i < 5; 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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
createElement	60686.3 Ops/sec
template String	26876.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 is tested, the pros and cons of different approaches, and other considerations.

**Benchmark Definition**

The benchmark consists of two test cases: `createElement` and `template String`. Both tests are designed to measure the performance difference between using the `createElement` method and template strings for creating HTML elements.

**Test Case 1: createElement**

In this test case, the `createElement` function is used to create a series of HTML elements (a select button, its index, content, and menu) and append them to a container element (`div`) five times. The resulting HTML code is then cleared from the `div` element.

**Test Case 2: template String**

In this test case, a template string is used to create the same series of HTML elements as in Test Case 1. The template string is then appended to the `div` element five times, and the resulting HTML code is cleared from the `div` element.

**Options Compared**

Two main options are being compared:

1. **createElement method**: This approach uses the native JavaScript function `createElement` to create HTML elements.
2. **Template String**: This approach uses template literals (backticks) to create HTML strings, which are then executed as if they were HTML elements.

**Pros and Cons of Different Approaches**

**createElement Method:**

Pros:

* Native JavaScript function, widely supported and optimized by browsers
* Can be more efficient for large numbers of elements

Cons:

* May require additional overhead for parsing and formatting the element structure
* May not be suitable for all use cases (e.g., complex layouts)

**Template String:**

Pros:

* Can be more concise and readable for simple HTML structures
* Does not require additional libraries or functions
* Can be useful for dynamic content generation

Cons:

* May have performance overhead due to parsing and execution of the template string
* Limited support for complex layouts and nested elements

**Other Considerations**

* **Browser Support**: Both approaches are supported by modern browsers, but the `createElement` method is generally more widely supported.
* **Performance**: The `createElement` method is likely to be faster for large numbers of elements due to its native implementation. However, template strings can provide benefits in terms of conciseness and readability.
* **Code Quality**: Template strings are often preferred in modern JavaScript development due to their readability and maintainability.

**Library Used**

In the benchmark code, the `createElement` function is not a built-in library but rather a custom implementation written by the author. However, there are other libraries available that provide similar functionality, such as jQuery's `append()` method or React's `createElement()` hook.

**Special JS Feature/Syntax**

The benchmark uses template literals (backticks), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). Template literals allow for more concise and readable string interpolation, making it easier to create dynamic content.

Related benchmarks:

Compare createElement vs template String - 5 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):