Benchmark: closest - MeasureThat.net

HTML Preparation code:

<div id="index">

  <div class="outer">
    <div>
      <div>
        <div>
          <div>
            <div>
              <div class="inner">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

function getClosestParent(elem, until, selector) {
  for (; elem && elem !== until; elem = elem.parentNode) {
    if (elem.matches(selector)) return elem;
  }
  return null;
}

var inner = document.querySelector(".inner");
var index = document.getElementById('index');
var arr1 = [];
var arr2 = [];
var outer1, outer2, i, j;

Tests:

Native
for(i=0;i<10;i++) { outer1 = inner.closest(".outer"); arr1.push(outer1); }
function
for(j=0;j<10;j++) { outer2 = getClosestParent(inner, index, ".outer"); arr2.push(outer2); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
function

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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!

**Benchmark Definition JSON**

The provided JSON represents a JavaScript benchmark that tests the performance of two approaches to find the closest parent element in a DOM tree.

**What is tested?**

Two test cases are compared:

1. **Native**: This test uses the built-in `closest()` method on the `inner` element, which is assumed to be the closest ancestor matching the `.outer` selector.
2. **Function**: This test defines a custom function `getClosestParent()` that takes an element, a reference element, and a CSS selector as arguments. The function iterates through the DOM tree until it finds the first element that matches the specified selector.

**Options compared**

The two approaches are compared in terms of performance:

* **Native**: Uses the built-in `closest()` method on the `inner` element.
* **Function**: Defines a custom function to find the closest parent element.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Native (closest() method)**:
	* Pros:
		+ Lightweight and efficient, as it leverages the browser's built-in implementation.
		+ Easy to use and understand for most developers.
	* Cons:
		+ May not be available in older browsers or those that don't support the `closest()` method.
		+ Limited flexibility in terms of customization.
2. **Function (getClosestParent())**:
	* Pros:
		+ More flexible, as it allows for customization and iteration over the DOM tree.
		+ Can be used with older browsers or those that don't support the `closest()` method.
	* Cons:
		+ Heavier and less efficient than the native implementation.
		+ Requires more code and understanding of the custom function.

**Library usage**

The benchmark uses a custom JavaScript function `getClosestParent()`, which is defined in the `Script Preparation Code` section. This function iterates through the DOM tree to find the first element that matches the specified selector.

**Special JS feature/syntax**

There are no special JavaScript features or syntax used in this benchmark, other than the use of arrow functions (e.g., `var inner = document.querySelector(" .inner");`) and template literals (e.g., `"var outer1, outer2, i, j;"`).

**Alternatives**

Other alternatives to test the performance of finding closest parent elements could include:

* Using a library like jQuery or React that provides similar functionality.
* Implementing the `closest()` method using a different algorithm or data structure (e.g., a trie).
* Comparing the performance of different CSS selectors or combinators.

Keep in mind that the specific alternatives will depend on the requirements and constraints of the benchmark.

Related benchmarks:

closest (version: 0)

Comparing performance of: Native vs function

Created: 7 years ago by: Guest

Jump to the latest result

Native

function

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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