Benchmark: querySelectorAll vs getElementsByTagName + length + for

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

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test case named "querySelectorAll vs getElementsByTagName + length + for". The benchmark compares the performance of three different approaches to retrieve and process elements from an HTML document:

1. `querySelectorAll` with `forEach`
2. `getElementsByTagName` followed by `Array.from` and `forEach`
3. `getElementsByTagName` with a simple `for` loop

**Approach 1: `querySelectorAll` with `forEach`**

This approach uses the `querySelectorAll` method to select all elements with the tag name "div" and then iterates over them using the `forEach` method.

Pros:

* Simple and concise code
* Easy to read and maintain

Cons:

* Can be slower than other approaches due to the overhead of creating a DOM NodeList and iterating over it using `forEach`

**Approach 2: `getElementsByTagName` followed by `Array.from` and `forEach`**

This approach uses the `getElementsByTagName` method to retrieve an HTMLCollection (a collection of nodes) containing all elements with the tag name "div". It then converts this collection to an array using `Array.from` and iterates over it using `forEach`.

Pros:

* Can be faster than Approach 1 due to the use of a more efficient data structure (an array)
* Allows for better control over iteration and indexing

Cons:

* More verbose code compared to Approach 1
* Requires understanding of HTMLCollections and their limitations

**Approach 3: `getElementsByTagName` with a simple `for` loop**

This approach uses the `getElementsByTagName` method to retrieve an HTMLCollection containing all elements with the tag name "div". It then iterates over this collection using a simple `for` loop.

Pros:

* Fastest of the three approaches due to minimal overhead
* Simple and easy to understand code

Cons:

* Less flexible than Approach 2, as it only provides basic iteration control
* May not be suitable for more complex iteration scenarios

**Library Used:**

None explicitly mentioned in the provided JSON. However, `Array.from()` is a modern JavaScript method that was introduced in ECMAScript 2015 (ES6). It is supported by most modern browsers, including Chrome.

**Special JS Features/Syntax:**

None mentioned in the provided JSON.

**Other Considerations:**

* The benchmark uses a simple HTML document with multiple `div` elements to test the performance of each approach.
* The benchmark measures the number of executions per second (ExecutionsPerSecond) for each approach, which can be used to compare their relative performance.
* The benchmark results are displayed in a human-readable format, making it easy to understand and analyze the results.

**Alternatives:**

If you want to explore other approaches or alternatives, here are some options:

1. Use `querySelector` instead of `querySelectorAll` for more targeted element selection.
2. Compare with other DOM manipulation methods, such as `getElementsByClassName` or `getElementsByTagNameNS`.
3. Test with different HTML structures or sizes to see how the performance varies.
4. Explore the use of Web Workers or parallel processing to further optimize the benchmark.

Note that these alternatives may require additional modifications to the benchmark code and may not be suitable for all scenarios.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll + forEach	186918.2 Ops/sec
getElementsByTagName + Array.from + forEach	142527.5 Ops/sec
querySelectorAll + length + for	569040.0 Ops/sec
getElementsByTagName + length + for	2171423.8 Ops/sec

Related benchmarks:

querySelectorAll vs getElementsByTagName + length + for (version: 0)

Comparing performance of: querySelectorAll + forEach vs getElementsByTagName + Array.from + forEach vs querySelectorAll + length + for vs getElementsByTagName + 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):