Benchmark: getElementsByClassName vs get by window key vs querySelector by Attribute

HTML Preparation code:

<div id="test_element_id" class="test_element_class" custom-attribute="querySelector"></div>

Script Preparation code:

window.myObject = {test_element_id:document.getElementById('test_element_id'),test_element_id2:document.createElement('div')}

Tests:

getElementsByClassName
var el = document.getElementsByClassName('test_element_class')[0];
get by window key and vaidate
var el = window.myObject.test_element_id; if (el.isConnected && window.document.contains(el)){ const a = 1; }
querySelector by Attribute
var el = document.querySelector('[custom-attribute="querySelector"]');
getElementById
var el = document.getElementById('test_element_id');
get by window key
var el = window.myObject.test_element_id;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName
get by window key and vaidate
querySelector by Attribute
getElementById
get by window key

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
getElementsByClassName	5409972.5 Ops/sec
get by window key and vaidate	4207332.5 Ops/sec
querySelector by Attribute	4696564.0 Ops/sec
getElementById	8489378.0 Ops/sec
get by window key	10343985.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance of different JavaScript methods to retrieve elements from an HTML document is crucial for optimizing web applications.

**Benchmark Overview**

The provided benchmark measures the performance of four different methods to retrieve an element:

1. `getElementsByClassName`
2. `get by window key and vaidate` (a custom method that checks if the element is connected to the document)
3. `querySelector by Attribute` (using a query selector with an attribute)
4. `getElementById`

**Benchmark Definition JSON**

The benchmark definition json consists of two main parts:

* **Script Preparation Code**: This code sets up a global object `window.myObject` that contains a reference to an element and its duplicate.
* **Html Preparation Code**: This code creates an HTML element with the specified id, class, and custom attribute.

**Options Compared**

The benchmark compares the performance of four different methods:

1. `getElementsByClassName`: Returns an array of elements with the specified class name.
2. `get by window key and vaidate`: A custom method that checks if the element is connected to the document before returning it.
3. `querySelector by Attribute`: Uses a query selector with an attribute to retrieve the element.
4. `getElementById`: Returns the element with the specified id.

**Pros and Cons of Each Approach**

1. **getElementsByClassName**: Pros:
	* Wide browser support
	* Can be used for multiple elements at once
Cons:
	* Returns an array, which can be slower than retrieving a single element.
	* May return multiple elements if there are multiple elements with the same class name.
2. `get by window key and vaidate`: Pros:
	* Optimized for modern browsers that support the `isConnected` property
Cons:
	* Custom implementation, may not work in older browsers.
	* Requires an additional check to ensure the element is connected to the document.
3. `querySelector by Attribute`: Pros:
	* Fast and efficient query selector algorithm
Cons:
	* Only works for elements with the specified attribute.
4. `getElementById`: Pros:
	* Simple and straightforward implementation
Cons:
	* May not work if there are multiple elements with the same id.

**Library Usage**

The benchmark uses the following library:

* `querySelector` is a standard API provided by modern browsers, but it's also available as a polyfill for older browsers.

**Special JS Features or Syntax**

None of the methods use special JavaScript features or syntax beyond what's required to implement each method. However, some methods may rely on browser-specific properties like `isConnected`.

**Other Alternatives**

If you need to optimize similar performance-critical code, consider using:

* `document.querySelector` for a more efficient query selector implementation.
* `Element.prototype.contains` instead of checking if an element is connected to the document.

Keep in mind that the best approach depends on your specific use case and requirements. This benchmark aims to provide a general understanding of the performance differences between these common methods.

Related benchmarks:

getElementsByClassName vs get by window key vs querySelector by Attribute (version: 0)

Comparing performance of: getElementsByClassName vs get by window key and vaidate vs querySelector by Attribute vs getElementById vs get by window key

Created: one year ago by: Guest

Jump to the latest result

getElementsByClassName

get by window key and vaidate

querySelector by Attribute

getElementById

get by window key

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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