Benchmark: get variable elements

HTML Preparation code:

<div id="element" class="element" data-trigger="">text</div>

Tests:

getElementById
const element = document.getElementById('element'); element.innerText = 'text';
getElementsByClassName
const element = document.getElementsByClassName('element')[0]; element.innerText = 'text';
querySelector (ID)
const element = document.querySelector('#element'); element.innerText = 'text';
querySelector (class)
const element = document.querySelector('.element'); element.innerText = 'text';
querySelector (attribute)
const element = document.querySelector('[data-trigger]'); element.innerText = 'text';
querySelectorAll (ID)
const element = document.querySelectorAll('#element')[0]; element.innerText = 'text';
querySelectorAll (class)
const element = document.querySelectorAll('.element')[0]; element.innerText = 'text';
querySelectorAll (attribute)
const element = document.querySelectorAll('[data-trigger]')[0]; element.innerText = 'text';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByClassName
querySelector (ID)
querySelector (class)
querySelector (attribute)
querySelectorAll (ID)
querySelectorAll (class)
querySelectorAll (attribute)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Browser/OS: Chrome 94 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getElementById	313771.5 Ops/sec
getElementsByClassName	269587.1 Ops/sec
querySelector (ID)	281883.8 Ops/sec
querySelector (class)	267624.4 Ops/sec
querySelector (attribute)	270733.4 Ops/sec
querySelectorAll (ID)	245001.9 Ops/sec
querySelectorAll (class)	227157.7 Ops/sec
querySelectorAll (attribute)	218114.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance of JavaScript code is crucial for optimizing and improving the overall user experience. The provided benchmark definition and test cases focus on different ways to retrieve elements from an HTML document using JavaScript.

**Options Compared:**

1. `document.getElementById()`: Retrieves the first element with the specified ID.
2. `document.getElementsByClassName()`: Retrieves all elements with the specified class name.
3. `document.querySelector()` with various selectors:
	* `#element`: Selects the first element with the ID "element".
	* `.element`: Selects all elements with the class name "element".
	* `[data-trigger]`: Selects the first element with an attribute containing the value "data-trigger".
4. `document.querySelectorAll()` with various selectors:
	* `#element`: Retrieves all elements with the ID "element" and returns them as an HTMLCollection.
	* `.element`: Retrieves all elements with the class name "element" and returns them as an HTMLCollection.
	* `[data-trigger]`: Retrieves all elements with an attribute containing the value "data-trigger" and returns them as an HTMLCollection.

**Pros and Cons of Each Approach:**

1. `document.getElementById()`:
	* Pros: Fast, reliable, and widely supported.
	* Cons: Can be slow if there are many elements with the same ID (cache hit).
2. `document.getElementsByClassName()`:
	* Pros: Can retrieve multiple elements at once and is often faster than querying by ID.
	* Cons: May return more elements than needed, which can lead to unnecessary iterations.
3. `document.querySelector()` with various selectors:
	* Pros: Flexible and powerful, allowing for complex selections using CSS-like syntax.
	* Cons: May be slower than traditional element retrieval methods due to the complexity of the selection.
4. `document.querySelectorAll()` with various selectors:
	* Pros: Similar to `querySelector()`, but returns an HTMLCollection instead of a single element.
	* Cons: Can be slower and more memory-intensive than querying individual elements.

**Library/Feature Used:**

None of the provided test cases use any external libraries or features, so no additional context is necessary.

**Special JavaScript Features/Syntax:**

The `querySelector()` and `querySelectorAll()` methods use a CSS-like syntax to select elements, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This allows for more expressive and flexible selection of elements.

**Alternatives:**

Other ways to retrieve elements from an HTML document using JavaScript include:

1. Using a library like jQuery, which provides a set of utility functions for DOM manipulation.
2. Utilizing the `Element` API, which provides methods for querying and manipulating individual elements.
3. Implementing custom element retrieval logic using vanilla JavaScript.

However, these alternatives may not be as efficient or expressive as the `querySelector()` and `querySelectorAll()` methods, especially for complex selection scenarios.

Related benchmarks:

get variable elements (version: 0)

Comparing performance of: getElementById vs getElementsByClassName vs querySelector (ID) vs querySelector (class) vs querySelector (attribute) vs querySelectorAll (ID) vs querySelectorAll (class) vs querySelectorAll (attribute)

Created: 3 years ago by: Guest

Jump to the latest result

getElementById

getElementsByClassName

querySelector (ID)

querySelector (class)

querySelector (attribute)

querySelectorAll (ID)

querySelectorAll (class)

querySelectorAll (attribute)

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