Benchmark: children vs querySelectorAll scope

HTML Preparation code:

<div class="container">
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Tests:

children
const container = document.querySelector('.container > ul'); const items = container.children; console.log(container, items);
querySelectorAll scope
const container = document.querySelector('.container > ul'); const items = container.querySelectorAll(':scope > *'); console.log(container, items);

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

children

95K/s

querySelectorAll scope

81K/s

Fastest: children (1.2x faster)

View exact numbers

✓ children: 95,016 ops/sec
• querySelectorAll scope: 81,300 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
children
querySelectorAll scope

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; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

children

125K/s

querySelectorAll scope

107K/s

View exact numbers

Test name	Executions per second
✓ children	124,608 Ops/sec
querySelectorAll scope	106,987 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 benchmark and explain what is being tested, compared, and its pros and cons.

**Benchmark Definition**

The benchmark definition is represented by two test cases:

1. `children`: This test case checks the performance of using the `children` property to access the child elements of an element.
2. `querySelectorAll scope`: This test case checks the performance of using the `querySelectorAll` method with the `:scope` pseudo-class to access the child elements of an element.

**What is being tested?**

In both test cases, a container element with three child elements is created, and then the execution time is measured for each approach.

**Options compared**

The two options are:

1. **Using the `children` property**: This method returns a live HTMLCollection object containing all child nodes of an element.
2. **Using `querySelectorAll` with `:scope` pseudo-class**: This method returns a NodeList or HTMLCollection object containing all elements that match the specified CSS selector within the element's scope.

**Pros and Cons**

1. **Using the `children` property**:
	* Pros:
		+ Simple to use.
		+ Fast, since it returns a live collection of child nodes.
	* Cons:
		+ May not be as flexible as other methods, since it only accesses child nodes.
2. **Using `querySelectorAll` with `:scope` pseudo-class**:
	* Pros:
		+ More flexible than the `children` property, allowing access to all elements within a scope.
		+ Can be used for more complex selectors.
	* Cons:
		+ May have performance overhead due to the use of a pseudo-class.

**Library and its purpose**

There is no specific library mentioned in this benchmark. However, it's worth noting that `querySelectorAll` is a standard method provided by the W3C, and its usage is widely supported across browsers.

**Special JS feature or syntax**

The benchmark uses the `:scope` pseudo-class, which was introduced in CSS Selectors Level 4 (CSS3) and later adopted by JavaScript. This pseudo-class allows selecting elements within an element's scope, making it a useful tool for accessing child nodes without having to specify their exact index.

**Other alternatives**

If using `querySelectorAll` with the `:scope` pseudo-class is not feasible or preferred, other alternatives could include:

1. Using `getElementsByClassName` or `getElementById` with a class name that targets all child elements.
2. Using a `for` loop to iterate over child nodes.

However, these alternatives may have performance overhead or limitations compared to using the `children` property or `querySelectorAll` with `:scope`.

Overall, the choice between using the `children` property and `querySelectorAll` with `:scope` depends on the specific use case and requirements of your application.

children vs querySelectorAll scope (version: 0)

Comparing performance of: `children vs querySelectorAll scope`

Created: 3 years ago by: Guest

Go to the latest result

children

querySelectorAll scope

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

children vs querySelectorAll scope (version: 0)

Comparing performance of: children vs querySelectorAll scope

Created: 3 years ago by: Guest

Go to the latest result

children

querySelectorAll scope

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `children vs querySelectorAll scope`