Benchmark: querySelector vs querySelectorAll 9999

Script Preparation code:

	const x = 5;
      const y = 5;
      const z = 5;
      const xFrag = document.createDocumentFragment();
      for (let i = 0; i < x; i++) {
        const xNode = document.createElement("div");
        xNode.id = `box${i}`;
        xNode.classList.add("box", "container");
        const yFrag = document.createDocumentFragment();
        for (let j = 0; j < y; j++) {
          const yNode = document.createElement("div");
          yNode.id = `div${i}-${j}`;
          yNode.classList.add("block", "outer");
          for (let k = 0; k < z; k++) {
            const zNode = document.createElement("div");
            zNode.id = `div${i}-${j}-${k}`;
            zNode.classList.add("block", "inner");
            const p = document.createElement("p");
            p.id = `p${i}-${j}-${k}`;
            p.classList.add("content");
            p.textContent = `${i}-${j}-${k}`;
            zNode.append(p);
            yNode.append(zNode);
          }
          yFrag.append(yNode);
        }
        xNode.append(yFrag);
        xFrag.append(xNode);
      }
      const container = document.createElement("div");
      container.setAttribute("id", "container");
      container.classList.add("container");
      container.append(xFrag);
      document.body.append(container);

Tests:

querySelector
const selector = ".box:first-child ~ .box:nth-of-type(4n) + .box .block.inner > .content"; document.querySelector(selector);
querySelectorAll
const selector = ".box:first-child ~ .box:nth-of-type(4n) + .box .block.inner > .content"; document.querySelectorAll(selector);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	78949.4 Ops/sec
querySelectorAll	62338.2 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's being tested.

**Benchmark Definition JSON**

The benchmark definition defines two test cases:

1. `querySelector`: Tests the performance of `document.querySelector()` with a specific CSS selector.
2. `querySelectorAll`: Tests the performance of `document.querySelectorAll()` with the same CSS selector as above.

**What is being tested?**

Both tests create a large HTML document using JavaScript and then use the specified CSS selectors to select elements from that document. The goal is to measure the performance difference between `querySelector` and `querySelectorAll`.

**Options compared**

The two options being compared are:

* `document.querySelector()`: Selects only one element that matches the specified selector.
* `document.querySelectorAll()`: Returns a list of all elements that match the specified selector.

**Pros and Cons of each approach:**

* `document.querySelector()`:
	+ Pros:
		- Faster, as it only needs to find one matching element.
		- More efficient for simple selectors.
	+ Cons:
		- May return null if no matching element is found, which can lead to errors or unexpected behavior.
		- Not suitable for scenarios where you need to select multiple elements.
* `document.querySelectorAll()`:
	+ Pros:
		- Returns a list of all matching elements, making it easier to work with multiple selections.
		- Suitable for scenarios where you need to select multiple elements.
	+ Cons:
		- Slower, as it needs to find all matching elements.
		- May lead to performance issues if dealing with large datasets.

**Library/JavaScript feature used**

In this benchmark, the following JavaScript features/libraries are used:

* `document.createDocumentFragment()`: A utility function that creates a new document fragment, which is a container for a subset of DOM nodes. It's used to improve performance by reducing the number of DOM mutations.
* CSS selectors: The benchmark uses a specific CSS selector with pseudo-class and attribute selectors (`:first-child`, `~`, `:nth-of-type(4n)`) to select elements from the generated HTML document.

**Other considerations**

When working with large datasets or complex selections, it's essential to consider the following:

* Caching: If you need to reuse the same selection multiple times, consider caching the result of `document.querySelector()` or `document.querySelectorAll()`.
* Optimizations: Be aware of optimizations like CSS precomputation and caching that can improve performance in certain scenarios.

**Alternatives**

If you're interested in exploring alternative approaches, here are a few:

* Use a library like jQuery or another DOM manipulation library that provides faster and more efficient methods for selecting elements.
* Consider using a different approach, such as using an XPath expression with the `XMLDocument` API instead of CSS selectors.
* Experiment with various optimizations and caching techniques to improve performance in your specific use case.

Related benchmarks:

querySelector vs querySelectorAll 9999 (version: 0)

Comparing performance of: querySelector vs querySelectorAll

Created: 2 years ago by: Guest

Jump to the latest result

querySelector

querySelectorAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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