Benchmark: DOM traversal - MeasureThat.net

HTML Preparation code:

<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>
<p class="foo"></p>

Tests:

querySelectorAll
document.querySelectorAll('.foo')
getElementsByClassName
document.getElementsByClassName('foo')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	630456.3 Ops/sec
getElementsByClassName	2830020.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

MeasureThat.net is testing two different approaches to traverse DOM elements: `document.getElementsByClassName('foo')` and `document.querySelectorAll('.foo')`. Both methods are used to retrieve all HTML elements with a class attribute equal to 'foo'.

**Options compared:**

There are two options being compared:

1. **`getElementsByClassName`**: This method returns a live HTMLCollection of all elements that have the specified value as their className attribute.
2. **`querySelectorAll`**: This method returns a NodeList of all elements that match the specified CSS selector.

**Pros and Cons:**

* `getElementsByClassName`:
	+ Pros:
		- More flexible, as it allows for multiple class names to be specified.
		- Can be used with more advanced selectors (e.g., `[class="foo"]`).
	+ Cons:
		- Can be slower than `querySelectorAll` due to the overhead of creating a live collection.
		- May not be supported in older browsers or environments.
* `querySelectorAll`:
	+ Pros:
		- Generally faster and more efficient than `getElementsByClassName`.
		- More widely supported across browsers and environments.
	+ Cons:
		- Limited to single class names or specific selectors (e.g., `[class="foo"]`).

**Library:**

Neither of these methods relies on a library, as they are built-in DOM API methods.

**Special JS feature or syntax:**

There is no special JavaScript feature or syntax being used in this benchmark. The focus is solely on comparing the performance of two DOM traversal methods.

**Other alternatives:**

If you're looking for alternative approaches to traverse the DOM, some other options include:

1. **`document.querySelectorAll('*[class]')`**: This method returns a NodeList of all elements that have a class attribute.
2. `document.querySelector('.foo')`: While not as flexible as `getElementsByClassName`, this method returns the first element that matches the specified CSS selector.

Keep in mind that these alternatives may offer different performance characteristics or trade-offs, and should be evaluated on a case-by-case basis.

Overall, MeasureThat.net's benchmark helps developers understand the performance differences between two commonly used DOM traversal methods, allowing them to make informed decisions about which approach to use in their own projects.

Related benchmarks:

DOM traversal (version: 0)

Yeah!

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 8 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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