Benchmark: querySelectorAll vs getElementsByTagName iteration

HTML Preparation code:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Tests:

querySelectorAll
const allDivs = document.querySelectorAll('div'); allDivs.forEach(function (div) {});
getElementsByTagName
const allDivs = document.getElementsByTagName('div'); const arrayAllDivs = Array.from(allDivs); arrayAllDivs.forEach(function (div) {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByTagName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Linux

View result in a separate tab

Test name	Executions per second
querySelectorAll	940252.3 Ops/sec
getElementsByTagName	733825.8 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 definition and test cases to understand what's being tested.

**Benchmark Definition Json**

The benchmark defines two tests: `querySelectorAll` and `getElementsByTagName`. The `Script Preparation Code` is empty, which means that no JavaScript code is executed before running the test. The `Html Preparation Code` creates a set of 10 `<div>` elements, which will be used as targets for the tests.

**Test Case 1: `querySelectorAll`**

The test case uses the `document.querySelectorAll('div')` method to select all `<div>` elements on the page. It then iterates over the resulting NodeList using the `forEach` method.

Here's a brief explanation of what's being tested:

* The performance difference between using `querySelectorAll` versus other methods to select elements.
* The overhead of iterating over a NodeList versus an HTMLCollection.

**Pros and Cons**

* **Pros:**
	+ Easy to use and understand for developers familiar with the method.
	+ Can be faster than other methods, depending on the specific use case.
* **Cons:**
	+ May have slower performance due to the creation of a NodeList, which can lead to additional overhead.

**Test Case 2: `getElementsByTagName`**

The test case uses the `document.getElementsByTagName('div')` method to select all `<div>` elements on the page. It then converts the resulting HTMLCollection to an array using `Array.from()` and iterates over it using `forEach`.

Here's a brief explanation of what's being tested:

* The performance difference between using `getElementsByTagName` versus other methods to select elements.
* The overhead of converting an HTMLCollection to an array.

**Pros and Cons**

* **Pros:**
	+ Can be faster than using `querySelectorAll`, as it avoids the creation of a NodeList.
	+ Allows for more control over the result, as it's an array.
* **Cons:**
	+ Can be slower due to the conversion from HTMLCollection to array.
	+ May require more developer expertise.

**Other Considerations**

* The use of `Array.from()` to convert an HTMLCollection to an array adds some overhead, but can provide more control over the result.
* Both methods have their trade-offs in terms of performance and developer expertise required.

**Library Used: None**

There are no external libraries used in these test cases. However, it's worth noting that `querySelectorAll` is a part of the W3C DOM specification and is supported by most modern browsers.

**Special JS Feature/ Syntax: None**

There are no special JavaScript features or syntax used in these test cases. The focus is on comparing performance between two different methods for selecting elements.

**Alternative Approaches**

Other approaches to select elements include:

* `document.getElementById()`: Selects a single element by its ID.
* `document.querySelector()`: Selects a single element using CSS selectors.
* Using CSS attributes or pseudo-classes, such as `:first-child` or `[data-id]`.

Each of these methods has its own trade-offs and may be more or less suitable depending on the specific use case.

Related benchmarks:

querySelectorAll vs getElementsByTagName iteration (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 7 years ago by: Registered User

Jump to the latest result

querySelectorAll

getElementsByTagName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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