Benchmark: querySelectorAll vs getElementsByTagName iteration with 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
const allDivs = Array.from(document.querySelectorAll('div')); for (const div of allDivs){}
getElementsByTagName
const allDivs = document.getElementsByTagName('div'); for (const div of allDivs){}

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: 6 months ago)

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

Browser/OS: Firefox 145 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	1006354.7 Ops/sec
getElementsByTagName	1866385.1 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 benchmarking scenario.

**Overview**

The goal of this benchmark is to compare the performance of two methods for retrieving all `<div>` elements in an HTML document: `document.querySelectorAll('div')` (querySelectorAll) and `document.getElementsByTagName('div')`. The tests are designed to measure which method executes faster, with a focus on iteration using a `for` loop.

**Options Compared**

The benchmark compares the following two options:

1. **querySelectorAll**: This method returns an HTMLCollection of elements that match the specified CSS selector. It's a more modern and efficient way to select elements in JavaScript.
2. **getElementsByTagName**: This method returns a collection of all elements with the specified tag name.

**Pros and Cons**

- **querySelectorAll**
  - Pros:
    * More flexible than `getElementsByTagName` since it can use a CSS selector, allowing for more complex selections (e.g., `document.querySelectorAll('div > span')`).
    * Faster execution performance compared to `getElementsByTagName`, especially for large datasets.
  - Cons:
    * Requires the HTMLCollection API, which is being deprecated in favor of the newer DOMStringList and HTMLIterable APIs.
    * May be slower than `getElementsByTagName` when dealing with very specific or simple selectors (though this difference should be negligible for most use cases).

- **getElementsByTagName**
  - Pros:
    * Well-supported by older browsers and versions.
    - Easier to implement complex selections using a loop and checking the element's tag name directly.
  - Cons:
    * Less flexible than `querySelectorAll`, requiring manual iteration through the collection or relying on deprecated APIs.

**Library/Functionality Used**

In both cases, we're relying on native JavaScript methods for DOM manipulation. No external libraries are required.

**Special JS Feature/Syntax (if applicable)**

None of these benchmark tests rely on special JavaScript features or syntax beyond basic iteration using a `for` loop and support for the HTMLCollection API in older browsers. Modern JavaScript engines generally optimize performance for such fundamental operations.

**Other Alternatives**

For more complex DOM queries, you might consider using modern JavaScript APIs like:

- **QuerySelector**: Offers more advanced selector capabilities compared to `querySelectorAll`.
- **DOM Traversal Methods**: Methods like `document.querySelectorAll()` and `document.getElementById()`, in combination with iteration methods (e.g., `forEach`), for selecting elements based on specific criteria or attributes.
- **Template Literals** or **String Interpolation**: Useful for constructing complex CSS selectors by dynamically concatenating parts of a selector string.

For performance comparisons, you might also explore the use of:

- **Benchmarking Libraries**: Tools like Benchmark.js or the new `console.time` API, designed to provide precise timing measurements.
- **JavaScript Performance Tools and APIs**: Built-in tools like V8's JavaScript Profiler (for Chrome) or Firefox Developer Tools for profiling performance-intensive scripts.

Keep in mind that the effectiveness of these alternatives might depend on your specific use case and environment.

Related benchmarks:

querySelectorAll vs getElementsByTagName iteration with for (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 2 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByTagName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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