Benchmark: DOM traversal Compare

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')
getElementsByTagName
document.getElementsByTagName('p')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName
getElementsByTagName

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/107.0.0.0 Safari/537.36 Edg/107.0.1418.42

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll	849845.2 Ops/sec
getElementsByClassName	1941750.2 Ops/sec
getElementsByTagName	1860740.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of three DOM traversal methods in JavaScript: `querySelectorAll`, `getElementsByClassName`, and `getElementsByTagName`. The test case uses an HTML structure with 10 identical elements, each with a class "foo".

**Options Comparison**

1. **`querySelectorAll('.foo')`**: This method selects all elements with the exact class name "foo". It is considered fast because it allows the browser to use its internal CSS parser and DOM caching.
	* Pros: Fast, efficient, and widely supported.
	* Cons: May not match exactly with CSS selectors, can be slower for complex queries.
2. **`document.getElementsByClassName('foo')`**: This method returns a live HTMLCollection of all elements with the class "foo". It is considered slow because it requires the browser to scan the DOM tree for matching elements, which can be time-consuming.
	* Pros: Simple and easy to understand, but slower than `querySelectorAll`.
	* Cons: Can be slower, less efficient than `querySelectorAll`, and may cause performance issues in complex scenarios.
3. **`document.getElementsByTagName('p')`**: This method returns a live HTMLCollection of all elements with the tag name "p". It is considered slow because it requires the browser to scan the DOM tree for matching elements with a specific tag name, which can be time-consuming.
	* Pros: Simple and easy to understand, but slower than `querySelectorAll`.
	* Cons: Can be slower, less efficient than `querySelectorAll`, and may cause performance issues in complex scenarios.

**Library Considerations**

None of the test cases use any external libraries. The benchmark focuses solely on the built-in DOM traversal methods provided by JavaScript.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. All tests rely on standard ECMAScript features and do not utilize experimental or proprietary APIs.

**Other Alternatives**

1. **`querySelector('p.foo')`**: This method selects an element with the tag name "p" that has a descendant with class "foo". It is considered fast because it allows the browser to use its internal CSS parser and DOM caching.
2. **`document.querySelector('.foo')`**: This method returns the first matching element with the class "foo" in the document. It is considered slower than `querySelectorAll` due to the need for a more complex query.
3. **`getElementsByTagName('p')`** ( deprecated ): This method was previously used for selecting elements with the tag name "p", but it has been deprecated in favor of `getElementsByTagName`.

Note: The performance differences between these alternatives may vary depending on the specific use case, browser version, and platform.

Related benchmarks:

DOM traversal Compare (version: 0)

Yeah!

Comparing performance of: querySelectorAll vs getElementsByClassName vs getElementsByTagName

Created: 2 years ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByClassName

getElementsByTagName

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