Benchmark: querySelectorAll vs getElementsByTagName + (fixed/dynamic) length + for

querySelectorAll vs getElementsByTagName + (fixed/dynamic) length + for (version: 0)

Comparing performance of: querySelectorAll + forEach vs getElementsByTagName + Array.from + forEach vs querySelectorAll + length + for vs getElementsByTagName + length + for vs querySelectorAll + dynamic length + for vs getElementsByTagName + dynamic length + for

Created: 2 years ago by: Guest

Jump to the latest result

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 + forEach
const allDivs = document.querySelectorAll('div'); allDivs.forEach(function (div) {});
getElementsByTagName + Array.from + forEach
const allDivs = document.getElementsByTagName('div'); const arrayAllDivs = Array.from(allDivs); arrayAllDivs.forEach(function (div) {});
querySelectorAll + length + for
const allDivs = document.querySelectorAll('div'); for (var i = 0, ilen = allDivs.length; i < ilen; i++) { /*NOOP*/ }
getElementsByTagName + length + for
const allDivs = document.getElementsByTagName('div'); for (var i = 0, ilen = allDivs.length; i < ilen; i++) { /*NOOP*/ }
querySelectorAll + dynamic length + for
const allDivs = document.querySelectorAll('div'); for (var i = 0; i < allDivs.length; i++) { /*NOOP*/ }
getElementsByTagName + dynamic length + for
const allDivs = document.getElementsByTagName('div'); for (var i = 0; i < allDivs.length; i++) { /*NOOP*/ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll + forEach
getElementsByTagName + Array.from + forEach
querySelectorAll + length + for
getElementsByTagName + length + for
querySelectorAll + dynamic length + for
getElementsByTagName + dynamic length + for

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll + forEach	1570456.1 Ops/sec
getElementsByTagName + Array.from + forEach	2186685.5 Ops/sec
querySelectorAll + length + for	2615107.2 Ops/sec
getElementsByTagName + length + for	8539310.0 Ops/sec
querySelectorAll + dynamic length + for	2143153.2 Ops/sec
getElementsByTagName + dynamic length + for	4635964.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches on various browsers and devices.

The provided benchmark definition represents a series of test cases that compare the performance of four different approaches:

1. `querySelectorAll` with `forEach`
2. `getElementsByTagName` followed by `Array.from` and then `forEach`
3. `querySelectorAll` with dynamic length and then `for` loop
4. `getElementsByTagName` followed by dynamic length and then `for` loop

**Options Compared**

The four options compared in the benchmark are:

1. **querySelectorAll + forEach**: Uses `document.querySelectorAll('div')` to get all div elements, loops through them using `forEach`, and performs no operations on each element.
2. **getElementsByTagName + Array.from + forEach**: Uses `document.getElementsByTagName('div')` to get all div elements, converts the result to an array using `Array.from`, loops through the array using `forEach`, and performs no operations on each element.
3. **querySelectorAll + length + for**: Uses `document.querySelectorAll('div')` to get all div elements, gets their length using `length`, and then uses a `for` loop to iterate over the elements without performing any operations on them.
4. **getElementsByTagName + dynamic length + for**: Uses `document.getElementsByTagName('div')` to get all div elements, gets their dynamic length (i.e., the actual number of elements in the array), and then uses a `for` loop to iterate over the elements without performing any operations on them.

**Pros and Cons**

Here's a brief analysis of each option:

1. **querySelectorAll + forEach**: This approach is simple and concise, but it may not be the most efficient since `forEach` creates a new context for each element.
2. **getElementsByTagName + Array.from + forEach**: This approach uses `Array.from`, which can create an intermediate array, potentially affecting performance.
3. **querySelectorAll + length + for**: This approach is straightforward and avoids creating unnecessary objects or arrays, but it may not be as efficient since the loop iterates over the elements without performing any operations on them.
4. **getElementsByTagName + dynamic length + for**: This approach uses the actual number of elements in the array, which can lead to more efficient loops since it avoids iterating over empty spaces.

**Library and Special Features**

* `querySelectorAll` is a DOM query method that returns a NodeList (a live HTML collection of node references).
* `getElementsByTagName` is another DOM query method that returns an HTMLCollection (an unordered collection of nodes with the same tag name).

No special JavaScript features or syntax are used in this benchmark.

**Other Alternatives**

Other approaches could be compared to these four options, such as:

1. Using `document.querySelectorAll` with a specific CSS selector instead of `*`
2. Using a library like Lodash to improve performance
3. Using Web Workers for parallel execution
4. Comparing the performance of different JavaScript engines (e.g., V8 vs SpiderMonkey)

However, these alternatives are not explicitly mentioned in the benchmark definition provided.

Related benchmarks: