Benchmark: querySelectorAll(':scope > *') vs childNodes

HTML Preparation code:

<div id='parent'></div>

Script Preparation code:

let p = document.getElementById('parent');
Array(100).forEach(i=>p.append(`<span></span>`));

Tests:

querySelectorAll
document.getElementById('parent').querySelectorAll(':scope > *').forEach((c,i)=>c.textContent=i);
childNodes
document.getElementById('parent').childNodes.forEach((c,i)=>c.textContent=i);

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

childNodes

3.4M/s

querySelectorAll

1.7M/s

Fastest: childNodes (2.0x faster)

View exact numbers

✓ childNodes: 3,358,926 ops/sec
• querySelectorAll: 1,715,535 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
querySelectorAll
childNodes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Linux

View result in a separate tab

childNodes

4.6M/s

querySelectorAll

2.1M/s

View exact numbers

Test name	Executions per second
✓ childNodes	4,581,419 Ops/sec
querySelectorAll	2,093,333 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing two approaches to traverse and manipulate an HTML element: `querySelectorAll` with the `:scope > *` pseudo-class, and `childNodes`.

**What's Being Tested?**

Both tests are designed to measure the performance of traversing and manipulating the HTML elements within a container element (`document.getElementById('parent')`). The container has 100 child elements (span tags) appended to it using JavaScript.

The two approaches being compared are:

1. **querySelectorAll**: This method is used to select all descendant elements that match a specified CSS selector. In this case, `:scope > *` means "all direct children of the current element (`document.getElementById('parent')`)". The test iterates through the matched elements and sets their text content to incrementing numbers.
2. **childNodes**: This property returns a live HTMLCollection containing all child nodes of an element. In this case, the test iterates through the child nodes and sets their text content to incrementing numbers.

**Pros and Cons:**

* **querySelectorAll**:
	+ Pros:
		- More flexible and powerful for complex selectors.
		- Can be used with various selectors, not just `:scope > *`.
	+ Cons:
		- May incur additional overhead due to the complexity of the selector evaluation.
		- Less efficient than `childNodes` for simple node iteration.
* **childNodes**:
	+ Pros:
		- More lightweight and efficient for simple node iteration.
		- Does not require complex selector evaluation.
	+ Cons:
		- Less flexible and powerful compared to `querySelectorAll`.
		- May have different behavior when used with older browsers or specific HTML structures.

**Library/Feature Considerations:**

There are no notable libraries or features being tested in this benchmark. However, the use of `:scope` is a feature introduced in CSS3 (specifically, in 2015), which allows selecting descendants based on the current element's scope. The use of `:scope > *` is a shorthand for "all direct children" within that scope.

**Other Alternatives:**

For traversing HTML elements, other approaches could include:

1. Using `document.body.children` (for simple cases) or implementing a custom iterator.
2. Employing libraries like jQuery or VanillaJS's built-in `Element.prototype.querySelectorAll` method for more complex selectors.
3. Utilizing a recursive function to traverse the DOM tree.

Keep in mind that these alternatives might introduce additional overhead, depending on the specific use case and performance requirements.

In summary, this benchmark compares two approaches to traversing and manipulating HTML elements: `querySelectorAll` with a pseudo-class and `childNodes`. The choice between these methods depends on the complexity of the selector, the desired level of flexibility, and the potential trade-offs in terms of efficiency.

querySelectorAll(':scope > *') vs childNodes (version: 1) Benchmark.js

Comparing performance of: `querySelectorAll vs childNodes`

Created: 6 years ago by: Registered User

Go to the latest result

querySelectorAll

childNodes

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelectorAll(':scope > *') vs childNodes (version: 1) Benchmark.js

Comparing performance of: querySelectorAll vs childNodes

Created: 6 years ago by: Registered User

Go to the latest result

querySelectorAll

childNodes

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `querySelectorAll vs childNodes`