Benchmark: closest vs querySelector

closest vs querySelector (version: 0)

Goal: Get the target element inside the DOM Test case #1 - You don't have the target id - Find a target element through DOM via Element.closest() Test case #2 - You have the target id from your state - Find the target element via Document.querySelector()

Comparing performance of: closest vs querySelector

Created: 2 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div><div><div>

<div data-parent="parent-id">

  <div><div>

    <div data-target="target-id">

      <div><div>

        <div data-clicked="clicked-id"></div>

      </div></div>

    </div>

  </div></div>

</div>

</div></div></div>

Script Preparation code:

var clicked = document.querySelector('[data-clicked]')
var parentEl = document.querySelector('[data-parent="parent-id"]')

Tests:

closest
clicked.closest('[data-target]')
querySelector
parentEl.querySelector('[data-target="target-id"]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
closest	6186475.0 Ops/sec
querySelector	10833523.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data to understand what is being tested.

**Overview**

The `MeasureThat.net` benchmark compares the performance of two approaches: using the `Element.closest()` method (also known as "closest" in the benchmark) and using the `Document.querySelector()` method. The goal is to find a target element within the DOM, either by ID or through a nested structure.

**Options Compared**

Two options are compared:

1. **`Element.closest()`**: This method traverses up the DOM tree from an element until it finds a descendant that matches the specified selector.
2. **`Document.querySelector()`**: This method searches for an element within the document that matches the specified CSS selector.

**Pros and Cons of Each Approach**

* **`Element.closest()`**:
	+ Pros: Can be more efficient when searching for elements in a nested structure, as it only traverses up the tree.
	+ Cons: May not work well with complex selectors or deep DOM structures.
* **`Document.querySelector()`**:
	+ Pros: Highly flexible and powerful, supporting complex CSS selectors and able to search the entire document.
	+ Cons: Can be slower than `closest()` due to its more exhaustive search process.

**Library Used**

In this benchmark, neither library is explicitly used. The elements are accessed directly using `document.querySelector()` or traversed up the DOM tree using `Element.closest()`. However, in a real-world scenario, these libraries might be used for similar tasks:

* `Document.querySelector()` is part of the W3C DOM specification and is widely supported by modern browsers.
* `Element.closest()` is also part of the W3C DOM specification, but its implementation can vary across browsers.

**Special JavaScript Feature or Syntax**

None are mentioned in this benchmark. The code only uses standard JavaScript syntax.

**Other Alternatives**

Other approaches to find a target element within the DOM might include:

* Using `Element.prototype.querySelector()` ( deprecated in modern browsers)
* Using `DOMQuery` libraries like jQuery or cheerio
* Implementing custom search algorithms using recursion or iteration

The `MeasureThat.net` benchmark provides a useful comparison of these two common methods for finding elements within the DOM, helping developers understand performance differences and optimize their code accordingly.

Related benchmarks: