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

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

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

Go 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*/ }

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Firefox 8 runs

getElementsByTagName + length + for

5.0M/s

getElementsByTagName + dynamic length + for

2.8M/s

querySelectorAll + length + for

1.8M/s

querySelectorAll + dynamic length + for

1.4M/s

getElementsByTagName + Array.from + forEach

1.4M/s

querySelectorAll + forEach

1.2M/s

Fastest: getElementsByTagName + length + for (4.3x faster)

View exact numbers

✓ getElementsByTagName + length + for: 4,954,010 ops/sec
• getElementsByTagName + dynamic length + for: 2,847,124 ops/sec
• querySelectorAll + length + for: 1,796,150 ops/sec
• querySelectorAll + dynamic length + for: 1,427,745 ops/sec
• getElementsByTagName + Array.from + forEach: 1,379,798 ops/sec
• querySelectorAll + forEach: 1,158,273 ops/sec

Chrome 7 runs

getElementsByTagName + length + for

19.8M/s

getElementsByTagName + dynamic length + for

4.6M/s

querySelectorAll + length + for

3.6M/s

querySelectorAll + dynamic length + for

2.9M/s

querySelectorAll + forEach

724K/s

getElementsByTagName + Array.from + forEach

556K/s

Fastest: getElementsByTagName + length + for (35.7x faster)

View exact numbers

✓ getElementsByTagName + length + for: 19,842,378 ops/sec
• getElementsByTagName + dynamic length + for: 4,592,327 ops/sec
• querySelectorAll + length + for: 3,588,473 ops/sec
• querySelectorAll + dynamic length + for: 2,866,115 ops/sec
• querySelectorAll + forEach: 724,435 ops/sec
• getElementsByTagName + Array.from + forEach: 555,533 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 + 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: 2 months 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

getElementsByTagName + length + for

8.5M/s

getElementsByTagName + dynamic length + for

4.6M/s

querySelectorAll + length + for

2.6M/s

getElementsByTagName + Array.from + forEach

2.2M/s

querySelectorAll + dynamic length + for

2.1M/s

querySelectorAll + forEach

1.6M/s

View exact numbers

Test name	Executions per second
✓ getElementsByTagName + length + for	8,539,310 Ops/sec
getElementsByTagName + dynamic length + for	4,635,964 Ops/sec
querySelectorAll + length + for	2,615,107 Ops/sec
getElementsByTagName + Array.from + forEach	2,186,686 Ops/sec
querySelectorAll + dynamic length + for	2,143,153 Ops/sec
querySelectorAll + forEach	1,570,456 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.

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

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

Go to the latest result

querySelectorAll + forEach

getElementsByTagName + Array.from + forEach

querySelectorAll + length + for

getElementsByTagName + length + for

querySelectorAll + dynamic length + for

getElementsByTagName + dynamic length + for

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Firefox 8 runs

Chrome 7 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 + forEach vs getElementsByTagName + Array.from + forEach vs querySelectorAll + length + for vs getElementsByTagName + length + for vs querySelectorAll + dynamic length + for vs getElementsByTagName + dynamic length + for`