Benchmark: tempalte literal vs query selector/set attribute

HTML Preparation code:

<!DOCTYPE html>

<html lang="en">

<body></body>

</html>

Script Preparation code:

var e = {};
e.item = document.body;
e.data = {
    isRequired: true,
    header: 'something'
}

Tests:

template literal
e.item.innerHTML = `<div class="wj-listbox-item__inner">`+ `<input class="wj-listbox-item__input" type="checkbox">` + `<span class="wj-listbox-item__label">${e.data.header}</span>`+ `</div>`; if(e.data.isRequired) { const checkbox = e.item.querySelector('input[type="checkbox"'); if(checkbox){ checkbox.setAttribute("disabled", true); } }
query selector
e.item.innerHTML = `<div class="wj-listbox-item__inner">`+ `<input class="wj-listbox-item__input" type="checkbox" ${e.data.isRequired ? 'disabled' : '' }>` + `<span class="wj-listbox-item__label">${e.data.header}</span>`+ `</div>`;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template literal
query selector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
template literal	95073.5 Ops/sec
query selector	109772.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript benchmark test case on MeasureThat.net, which compares the performance of two approaches to set attributes and select elements in HTML documents: template literals and query selectors.

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. **Template Literal**: This approach uses template literals (the `${...}` syntax) to set the `disabled` attribute on an input element based on a condition.
2. **Query Selector**: This approach uses the `querySelector()` method to select the input element and then sets its `disabled` attribute.

**Options Compared**

The benchmark compares two options:

1. **Template Literal**
2. **Query Selector**

**Pros and Cons of Each Approach**

**Template Literal**

Pros:

* Can be more concise and readable for simple cases
* Can reduce the number of DOM operations

Cons:

* May have performance overhead due to string manipulation
* May not work well with complex expressions or nested conditions

**Query Selector**

Pros:

* Can be more efficient for selecting elements, especially when using CSS selectors
* Can be more flexible for handling complex DOM structures

Cons:

* May require more code and complexity
* May incur additional performance overhead due to the `querySelector()` method

**Library and Purpose**

There is no explicit library mentioned in the benchmark definition. However, the use of `querySelector()` suggests that it may be using a browser's built-in API for element selection.

**Special JS Features or Syntax**

The template literal syntax (`${...}`) is a feature introduced in ECMAScript 2015 (ES6). It allows embedding expressions inside string literals. While not specific to JavaScript, this syntax is widely supported and used in modern web development.

**Other Alternatives**

Other alternatives for setting attributes and selecting elements might include:

* Using `setAttribute()` or `getAttribute()` methods directly on the element
* Using a CSS class selector (e.g., `.wj-listbox-item__input`) instead of an inline style or attribute
* Using a library like jQuery, which provides a convenient API for DOM manipulation

In summary, the benchmark tests two approaches to set attributes and select elements in HTML documents: template literals and query selectors. The pros and cons of each approach are discussed above, along with considerations for performance, conciseness, and flexibility.

Related benchmarks:

tempalte literal vs query selector/set attribute (version: 0)

tempalte literal vs query selector/set attribute

Comparing performance of: template literal vs query selector

Created: 3 years ago by: Guest

Jump to the latest result

template literal

query selector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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