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) {});

Historical Performance Data aggregated from 79 community runs

Desktop Results:

Chrome 54 runs

querySelectorAll

743K/s

getElementsByTagName

575K/s

Fastest: querySelectorAll (1.3x faster)

View exact numbers

✓ querySelectorAll: 743,207 ops/sec
• getElementsByTagName: 575,092 ops/sec

Firefox 20 runs

getElementsByTagName

1.1M/s

querySelectorAll

960K/s

Fastest: getElementsByTagName (1.2x faster)

View exact numbers

✓ getElementsByTagName: 1,138,843 ops/sec
• querySelectorAll: 959,622 ops/sec

Safari 5 runs

querySelectorAll

2.9M/s

getElementsByTagName

2.2M/s

Fastest: querySelectorAll (1.3x faster)

View exact numbers

✓ querySelectorAll: 2,880,704 ops/sec
• getElementsByTagName: 2,202,529 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

querySelectorAll

940K/s

getElementsByTagName

734K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	940,252 Ops/sec
getElementsByTagName	733,826 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.

querySelectorAll vs getElementsByTagName iteration (version: 0)

Comparing performance of: `querySelectorAll vs getElementsByTagName`

Created: 7 years ago by: Registered User

Go to the latest result

querySelectorAll

getElementsByTagName

Historical Performance Data aggregated from 79 community runs

Desktop Results:

Chrome 54 runs

Firefox 20 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelectorAll vs getElementsByTagName iteration (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 7 years ago by: Registered User

Go to the latest result

querySelectorAll

getElementsByTagName

Historical Performance Data aggregated from 79 community runs

Desktop Results:

Chrome 54 runs

Firefox 20 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelectorAll vs getElementsByTagName`