Benchmark: deep querySelector vs js iteration

Script Preparation code:

  var levels = [document.createElement("audio"), document.createElement("span")];
  levels[1].appendChild(levels[0]);

  function getClone(depth) {
    while (depth > levels.length) {
      var span = document.createElement("span");//todo assumes that span is the simplest element for the browser to initiate.
      span.appendChild(levels[levels.length - 1]);
      levels.push(span);
    }
    return levels[depth - 1].cloneNode(true);
  }
getClone(100);

Tests:

querySelector deep
var top = getClone(10); var audio = top.querySelector("audio");
while children
var top = getClone(10); var audio = top; while(audio.children[0]) audio = audio.children[0];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector deep
while children

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

querySelector deep

155K/s

while children

62K/s

View exact numbers

Test name	Executions per second
✓ querySelector deep	155,044 Ops/sec
while children	62,361 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.

**Benchmark Overview**

The provided benchmark measures two approaches for querying elements within a deeply nested DOM structure:

1. Using `querySelector` (Method 1)
2. Using a while loop to iterate through the children of an element (Method 2)

**Options Compared**

* **QuerySelector**: A CSS selector API method that allows selecting elements by their attribute values, class names, ID attributes, and more.
* **While Loop Iteration**: An explicit iteration approach using a while loop to traverse the DOM structure.

**Pros and Cons of Each Approach:**

1. **QuerySelector**
	* Pros:
		+ Efficient and optimized for modern browsers
		+ Simplifies code and reduces complexity
		+ Less prone to errors due to its standardized syntax
	* Cons:
		+ May have performance overhead due to the creation of a CSS parser
		+ Not suitable for very large or deeply nested DOM structures (as it can lead to unnecessary parsing)
2. **While Loop Iteration**
	* Pros:
		+ Can be more efficient for very large or deeply nested DOM structures, as it doesn't require the overhead of a CSS parser
		+ Allows for fine-grained control over iteration and branching
	* Cons:
		+ More prone to errors due to manual iteration logic
		+ Can lead to increased complexity and readability issues

**Library Usage**

The benchmark uses JavaScript's built-in `querySelector` function, which is a part of the CSSOM (CSS Object Model) API. This library is provided by web browsers as part of their DOM implementation.

**Special JS Feature or Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what is widely supported in modern browsers.

**Other Alternatives**

For similar benchmarks, you can explore other options on MeasureThat.net or elsewhere:

* `querySelectorAll`: A method that selects multiple elements based on a CSS selector.
* `getElementsByClassName`/`getElementsByTagName`: Methods that select elements by class names and tag names, respectively.
* Other iterative approaches using methods like `every()`, `forEach()`, or custom loops.

**Benchmark Code Explanation**

The provided JavaScript code creates a nested DOM structure with 101 levels of child elements. The `getClone(depth)` function generates this structure at each level. The test cases then use these structures to measure the performance of their respective query methods:

1. "querySelector deep" uses `querySelector` to select an element by its attribute value.
2. "while children" iterates through the children of an element using a while loop.

These tests aim to simulate real-world scenarios where elements are deeply nested, and efficient querying is crucial for performance-critical applications.

deep querySelector vs js iteration (version: 0) Benchmark.js

Comparing performance of: `querySelector deep vs while children`

Created: 6 years ago by: Guest

Go to the latest result

querySelector deep

while children

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

deep querySelector vs js iteration (version: 0) Benchmark.js

Comparing performance of: querySelector deep vs while children

Created: 6 years ago by: Guest

Go to the latest result

querySelector deep

while children

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: `querySelector deep vs while children`