Benchmark: closest vs for loop

closest vs for loop (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 for loop vs closest (miss) vs for loop (miss)

Created: one year ago by: Registered User

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><div>      <div><div>      <div><div>      <div><div>

        <div data-clicked="clicked-id"></div>

      </div></div>      <div><div>      <div><div>      <div><div>      <div><div>

    </div>

  </div></div>

</div>

</div></div></div>

Script Preparation code:

var clicked = document.querySelector('[data-clicked]')

Tests:

closest
clicked.closest('[data-target]')
for loop
let target = clicked; do { target = target.parentElement; } while (target.getAttribute('data-target') === 'target-id' && target !== document.documentElement);
closest (miss)
clicked.closest('[data-miss]')
for loop (miss)
let target = clicked; do { target = target.parentElement; } while (target.getAttribute('data-miss') && target !== document.documentElement);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest
for loop
closest (miss)
for loop (miss)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
closest	8049786.5 Ops/sec
for loop	52545556.0 Ops/sec
closest (miss)	4928659.5 Ops/sec
for loop (miss)	53897704.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches. In this explanation, we'll analyze the provided benchmark definition json and discuss what options are compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark definition is divided into two main parts:

1. **Script Preparation Code**: This code sets up a clicked element using `document.querySelector('[data-clicked]')`. This element will be used as the target for the benchmark.
2. **Html Preparation Code**: This HTML code creates a nested DOM structure with several levels of div elements, each containing a "target" div with an attribute `data-target` set to "target-id".

**Individual Test Cases**

There are four test cases:

1. **closest**
	* Benchmark Definition: `clicked.closest('[data-target]')`
	* This test case uses the `Element.closest()` method to find the target element within the DOM.
2. **for loop**
	* Benchmark Definition: `let target = clicked; do { target = target.parentElement; } while (target.getAttribute('data-target') === 'target-id' && target !== document.documentElement);`
	* This test case uses a for loop to traverse the DOM and find the target element by checking the `data-target` attribute.
3. **closest (miss)**
	* Benchmark Definition: `clicked.closest('[data-miss]')`
	* This test case uses the same `Element.closest()` method but with an incorrect attribute `data-miss`.
4. **for loop (miss)**
	* Benchmark Definition: `let target = clicked; do { target = target.parentElement; } while (target.getAttribute('data-miss') && target !== document.documentElement);`
	* This test case uses the same for loop approach but with an incorrect attribute `data-miss`.

**Library**

There is no explicit library mentioned in the benchmark definition. However, it's likely that the `Element` and `Document` objects are part of the built-in DOM API.

**Pros and Cons**

Here's a brief summary of each test case:

* **closest**: This approach uses the `Element.closest()` method, which is a efficient way to find an ancestor element by testing multiple attributes at once. However, it may not work correctly if the target attribute is not present on the closest ancestor.
	+ Pros: Fast and efficient
	+ Cons: May fail for certain cases (e.g., incorrect attribute or no closest ancestor)
* **for loop**: This approach uses a traditional loop to traverse the DOM, which can be slower than using `Element.closest()`.
	+ Pros: Guaranteed to work correctly
	+ Cons: Slower than `Element.closest()`
* **closest (miss)** and **for loop (miss)**
	+ Both of these test cases have incorrect attributes, which may affect their performance or accuracy.

**Other Considerations**

* The benchmark result shows that the "for loop (miss)" test case performs better than the "closest" test case. This could be due to various factors, such as browser-specific optimizations or differences in DOM traversal.
* It's worth noting that using `Element.closest()` is generally a good practice for finding elements within the DOM, but it's essential to ensure that the attribute being tested is present on the closest ancestor.

**Alternatives**

If you're looking for alternative approaches, consider the following:

1. **Using `querySelectorAll()`**: Instead of `Element.closest()`, you can use `document.querySelectorAll('[data-target]')` to find all elements with the target attribute. This approach may be slower than `Element.closest()` but provides more flexibility.
2. **Using a library like jQuery**: If you're working in an environment where jQuery is available, you can use its `closest()` method or other DOM traversal functions to simplify your benchmark.

Keep in mind that these alternatives may change the performance characteristics of your benchmark, so it's essential to test and verify their results.

Related benchmarks:

closest vs for loop (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 for loop vs closest (miss) vs for loop (miss)

Created: one year ago by: Registered User

Jump to the latest result

closest

for loop

closest (miss)

for loop (miss)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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