Benchmark: deep querySelector vs js iteration vs firstChild

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];
while firstChild
var top = getClone(10); var audio = top; while(audio.firstChild) audio = audio.firstChild

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector deep
while children
while firstChild

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Android 14; Mobile; rv:135.0) Gecko/135.0 Firefox/135.0

Browser/OS: Firefox Mobile 135 on Android

View result in a separate tab

Test name	Executions per second
querySelector deep	63933.3 Ops/sec
while children	29525.3 Ops/sec
while firstChild	51301.2 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 benchmark.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case, where different approaches are compared to query an element with multiple levels of nested child elements using the `querySelector` method, `while children` loop, and `firstChild` property. The goal is to determine which approach performs better in terms of execution speed.

**Approaches**

There are three approaches being compared:

1. **`querySelector deep`**: This approach uses the `querySelector` method with a CSS selector that targets the deepest element.
2. **`while children`**: This approach uses a while loop to iterate through the child elements, starting from the first child and moving up the DOM tree until it finds the desired element.
3. **`firstChild`**: This approach uses the `firstChild` property to access the first child element of the current node.

**Options compared**

The three approaches are being compared in terms of their performance, with the goal of identifying which one is the fastest.

**Pros and Cons of each approach:**

1. **`querySelector deep`**:
	* Pros:
		+ Efficient and concise.
		+ Works well for most use cases.
	* Cons:
		+ May be slower for very deep or complex DOM trees due to the overhead of parsing the CSS selector.
2. **`while children`**:
	* Pros:
		+ Can handle very deep or complex DOM trees efficiently, as it only traverses the tree once.
	* Cons:
		+ Can be slower due to the overhead of the while loop and conditional checks.
3. **`firstChild`**:
	* Pros:
		+ Simple and easy to understand.
		+ May be faster for small or shallow DOM trees, as it only requires a single property access.
	* Cons:
		+ Can lead to slower performance in deeper DOM trees due to the overhead of traversing up the tree.

**Library usage**

None of the approaches explicitly use a JavaScript library. However, `querySelector` is a standard method provided by modern browsers through the DOM API.

**Special JS feature or syntax**

There are no special JS features or syntax used in this benchmark. The code uses standard JavaScript syntax and constructs.

**Other considerations**

When choosing an approach for querying elements with multiple levels of nested child elements, consider the following factors:

* **DOM tree depth**: For very deep or complex DOM trees, `while children` may be a better choice to ensure efficient traversal.
* **DOM tree complexity**: For simple or shallow DOM trees, `querySelector deep` may be sufficient and faster due to its concise syntax.
* **Performance requirements**: If speed is crucial, consider using `while children` or optimizing the CSS selector for `querySelector deep`.
* **Code readability**: Prioritize code readability and maintainability when choosing an approach.

**Alternatives**

Other alternatives for querying elements with multiple levels of nested child elements include:

1. Using a recursive function to traverse the DOM tree.
2. Utilizing libraries like jQuery or React's `find` method.
3. Leveraging browser-specific APIs, such as Chrome's `Elements API`.

However, these approaches may not be as efficient or scalable as the `while children` approach in this benchmark.

Related benchmarks:

deep querySelector vs js iteration vs firstChild (version: 0)

Comparing performance of: querySelector deep vs while children vs while firstChild

Created: 3 years ago by: Guest

Jump to the latest result

querySelector deep

while children

while firstChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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