Benchmark: querySelectorAll(*) vs getElementsByTagName(*) iteration

HTML Preparation code:

<div></div>
<p><b>bar <s>baz <i>some</i></s> fab</b></p>
<div><small>terms of text</small> more text nodes <b>here</b></div>
<div><p> text nodes <kbd>var</kbd> here </p></div>
<div><ul><li>some list items</li><li>2nd item</li></ul></div>
<div><p><i>test <b>some</b></i></p></div>
<div>lorem</div>
<div><b>foo</b></div>
<div>ipsum</div>
<section><div><article><h1>Test</h1></article></div></section>

Tests:

querySelectorAll
const allDivs = document.querySelectorAll('*'); allDivs.forEach(function (div) {});
getElementsByTagName
const allDivs = document.getElementsByTagName('*'); const arrayAllDivs = Array.from(allDivs); arrayAllDivs.forEach(function (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: one year ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

querySelectorAll

171K/s

getElementsByTagName

138K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	170,740 Ops/sec
getElementsByTagName	138,384 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 world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided JSON represents two individual test cases, each designed to measure the performance difference between using `querySelectorAll` and `getElementsByTagName` to select all elements in a HTML document. The tests are designed to be run multiple times to determine which method is faster.

**Options compared:**

Two options are being compared:

1. **`querySelectorAll`**: This method uses a CSS selector syntax (e.g., `*`) to select all elements on the page.
2. **`getElementsByTagName`**: This method returns an array of HTML elements with a specific tag name (in this case, `*`, meaning any element).

**Pros and Cons:**

1. **`querySelectorAll`**:
	* Pros:
		+ More flexible and expressive syntax for selecting elements (e.g., use `*` to select all, or `.class` to select elements with a specific class).
		+ Often faster than `getElementsByTagName` because it only requires one pass through the DOM.
	* Cons:
		+ Requires a CSS selector library (e.g., Sizzle) if not supported by the browser.
2. **`getElementsByTagName`**:
	* Pros:
		+ Simple and straightforward syntax for selecting elements with a specific tag name.
	* Cons:
		+ Less flexible than `querySelectorAll`, as it only selects elements with a specific tag name.
		+ Requires multiple passes through the DOM, which can be slower.

**Library usage:**

The `querySelectorAll` test case uses the Sizzle library to support older browsers that don't have native CSS selector support. The Sizzle library is a popular choice for implementing CSS selectors in JavaScript.

**Special JS feature or syntax:**

None of the provided benchmarks use special JavaScript features or syntax beyond what's standard for modern JavaScript development.

**Other alternatives:**

For testing `querySelectorAll` and `getElementsByTagName`, other alternatives could include:

1. **QuerySelector API**: A newer, more expressive CSS selector syntax that's widely supported by modern browsers.
2. **DOM Traversal APIs**: Other DOM traversal APIs, such as `document.body.querySelectorAll()` or `document.querySelector()`, which can be used to select elements in a document.

Keep in mind that the choice of method ultimately depends on the specific use case and requirements of your project.

querySelectorAll() vs getElementsByTagName() iteration (version: 0)

Comparing performance of: `querySelectorAll vs getElementsByTagName`

Created: 5 years ago by: Guest

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

querySelectorAll(*) vs getElementsByTagName(*) iteration (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: 5 years ago by: Guest

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

querySelectorAll() vs getElementsByTagName() iteration (version: 0)

Comparing performance of: `querySelectorAll vs getElementsByTagName`