Benchmark: parentElement vs parentNode vs closest(tag) vs closest(.class) vs closest(tag.class)

HTML Preparation code:

<span class="span">
  <div id='it'>
  </div>
</span>

Script Preparation code:

var it = document.getElementById("it");

Tests:

parentElement
it.parentElement
closest tag
it.closest('span')
closest class
it.closest('.span')
closest tag class
it.closest('span.span')
parentNode
it.parentNode

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
parentElement
closest tag
closest class
closest tag class
parentNode

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll explain the benchmarking scenario and its various aspects.

**Benchmark Description**

The provided JSON represents a JavaScript microbenchmark that tests the performance of different approaches to navigate within a DOM (Document Object Model) element hierarchy in HTML documents. The benchmark compares five different methods:

1. `parentElement`
2. `parentNode`
3. `closest(tag)`
4. `closest(class)`
5. `closest(tag.class)`

**Options Compared**

Each test case measures the execution time of one specific method when used to navigate within an element hierarchy.

**Pros and Cons of Each Approach:**

*   **`parentElement`**: This method is generally considered faster than `parentNode` because it avoids a single lookup on the `prototype` chain, which can be slower due to the way JavaScript engines cache prototypes. However, this approach may not work correctly for all elements (e.g., when they have no parent element).
*   **`parentNode`**: This method is generally slower than `parentElement` because it requires a single lookup on the `prototype` chain, which can be slower due to caching.
*   **`closest(tag)`**: This method uses a string search to find an ancestor with the specified tag name. It's usually faster than `parentElement` and `parentNode`, but may have issues if the element is not found or if there are multiple elements matching the tag name.
*   **`closest(class)`**: Similar to `closest(tag)`, this method uses a string search to find an ancestor with the specified class name. Its performance varies depending on how many ancestors match the class name, and it may have issues if no matching ancestor is found or if there are multiple matching elements.
*   **`closest(tag.class)`**: This method combines both `tag` and `class` searching into a single step. It's usually faster than `closest(tag)` and `closest(class)`, but its performance can be affected by the presence of namespace-qualified class names.

**Library Usage**

There is no explicit library mentioned in the provided JSON, but it's worth noting that some JavaScript engines (e.g., WebKit-based browsers) may cache prototypes for elements with a particular tag name or class. This caching behavior can affect performance and might influence the results of this benchmark.

**Special JS Features/Syntax**

The provided code snippet uses several standard JavaScript features:

*   `document.getElementById()` to retrieve an element by its ID.
*   `var` keyword to declare variables.
*   Template literals (`\r\n`) for string interpolation in HTML preparation code.

These features are widely supported across most modern browsers and do not require special knowledge of advanced JavaScript syntax or libraries.

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
parentElement	11986315.0 Ops/sec
closest tag	5491922.5 Ops/sec
closest class	5260580.5 Ops/sec
closest tag class	4766790.5 Ops/sec
parentNode	11233455.0 Ops/sec

Related benchmarks:

parentElement vs parentNode vs closest(tag) vs closest(.class) vs closest(tag.class) (version: 0)

Comparing performance of: parentElement vs closest tag vs closest class vs closest tag class vs parentNode

Created: 5 months ago by: Guest

Jump to the latest result

parentElement

closest tag

closest class

closest tag class

parentNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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