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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelectorAll + forEach	530931.4 Ops/sec
getElementsByTagName + Array.from + forEach	419146.4 Ops/sec
querySelectorAll + length + for	1914775.2 Ops/sec
getElementsByTagName + length + for	5567969.0 Ops/sec
querySelectorAll + dynamic length + for	1655937.6 Ops/sec
getElementsByTagName + dynamic length + for	2607873.8 Ops/sec

Related benchmarks:

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: one year ago by: Guest

Jump to the latest result

querySelectorAll + forEach

getElementsByTagName + Array.from + forEach

querySelectorAll + length + for

getElementsByTagName + length + for

querySelectorAll + dynamic length + for

getElementsByTagName + dynamic length + for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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