Benchmark: querySelectorAll vs getElementsByTagName

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 = document.querySelectorAll('div'); allDivs.forEach(function (div) { console.log(div); });
getElementsByTagName
const allDivs = document.getElementsByTagName('div'); const arrayAllDivs = Array.from(allDivs); arrayAllDivs.forEach(function (div) { console.log(div); });

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: 2 years ago)

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelectorAll	42231.0 Ops/sec
getElementsByTagName	34647.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

The benchmark compares two methods for selecting all elements with the tag name 'div' in an HTML document: `querySelectorAll` and `getElementsByTagName`.

**Options compared**

The two options are compared:

1. **querySelectorAll**: This method returns a NodeList, which is a live HTMLCollection of all elements that match the specified selector.
2. **getElementsByTagName**: This method also returns a collection of nodes (in this case, HTML elements), but it's an older and more traditional approach to selecting elements in DOM.

**Pros and Cons**

* **querySelectorAll**
	+ Pros: More modern and efficient than `getElementsByTagName`, as it leverages the browser's CSS selector engine.
	+ Cons: Requires Internet Explorer 9 or later for compatibility. Can be slower on older browsers.
* **getElementsByTagName**
	+ Pros: More widely supported across older browsers, including Internet Explorer 8 and earlier.
	+ Cons: Less efficient than `querySelectorAll` due to its reliance on the browser's built-in DOM implementation.

**Library usage**

Neither of these methods relies on a specific library, but they do utilize the Document Object Model (DOM) of HTML documents. The DOM provides an interface for manipulating and querying elements in an HTML document.

**Special JavaScript features or syntax**

None are mentioned in this benchmark.

**Other alternatives**

If you were to rewrite these benchmarks using more modern JavaScript features, you could use:

* `Array.from()` with a CSS selector: `const allDivs = Array.from(document.querySelectorAll('div'));`
* The `Array.prototype.forEach` method: `document.querySelectorAll('div').forEach(function (div) { console.log(div); });`

However, these alternatives are not directly comparable to the original `querySelectorAll` and `getElementsByTagName` methods.

**Benchmark preparation code**

The provided HTML preparation code creates a single-page document with 11 `<div>` elements. The script preparation codes for each test case select all `<div>` elements using their respective methods.

**Latest benchmark result**

The latest results show that `querySelectorAll` is slightly faster than `getElementsByTagName`, executing approximately 76,000 more times per second on the provided hardware configuration.

Related benchmarks:

querySelectorAll vs getElementsByTagName (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 7 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):