Benchmark: Getting a context: closest vs while loop vs event propagation

HTML Preparation code:

<context-provider id="provider">
  <div>
    <div></div>
    <div>
      <span>
        <span>
          <span>abc</span>
        </span>
        def
        <span>
          <span id="foo"></span>
        </span>
      </span>
      ghi
    </div>
  </div>
</context-provider>

Script Preparation code:

var context = document.getElementById('provider');
var element = document.getElementById('foo');

var SimpleContextEvent = class SimpleContextEvent extends Event {
  data = null;
  
  constructor() {
    super('context-request', {bubbles: true, composed: true});
  }
};

context.addEventListener('context-request', event => {
  event.data = 'abc';
  event.stopPropagation();
});

Tests:

closest with element selector
var i = 5000; while (i--) { let ctx = element; ctx = ctx.closest('context-provider'); }
while loop + tagName check
var i = 5000; while (i--) { let ctx = element; while (ctx) { if (ctx.tagName === 'CONTEXT-PROVIDER') { break; } ctx = ctx.parentNode; } }
event propagation
var i = 5000; while (i--) { let ctxEvent = new SimpleContextEvent(); element.dispatchEvent(ctxEvent); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest with element selector
while loop + tagName check
event propagation

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Linux

View result in a separate tab

Test name	Executions per second
closest with element selector	703.0 Ops/sec
while loop + tagName check	475.8 Ops/sec
event propagation	56.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three approaches to get a context element in a web page: using `closest()` with an element selector, using a while loop with a tagName check, and simulating event propagation.

**Options Compared**

1. **Closest() with Element Selector**: This approach uses the `closest()` method on an element reference to find the closest ancestor that matches a CSS selector.
2. **While Loop with TagName Check**: This approach uses a while loop to iterate over the ancestors of an element, checking each one's tagName until a match is found (in this case, a `<context-provider>` element).
3. **Event Propagation**: This approach simulates event propagation by dispatching an event on the target element and then stopping it with `event.stopPropagation()`.

**Pros and Cons**

1. **Closest() with Element Selector**:
	* Pros: efficient and concise way to find ancestors, works even if there are many intermediate elements.
	* Cons: may not work if the CSS selector is too specific or if the element is deeply nested within another element.
2. **While Loop with TagName Check**:
	* Pros: can handle cases where the closest ancestor is not found by CSS selector, but requires more iterations than `closest()`.
	* Cons: may be slower due to the extra iterations and checks.
3. **Event Propagation**:
	* Pros: simulates real-world event handling behavior, easy to implement.
	* Cons: may be slower due to the overhead of dispatching an event and stopping it.

**Libraries Used**

1. The benchmark uses the `closest()` method, which is a part of the DOM API in modern browsers. However, since this benchmark aims to measure performance across different browsers and platforms, we can assume that some older browsers might not support this method or may behave differently.
2. Another library used is JavaScript's built-in event handling mechanism, specifically the `Event` class and its methods (`dispatchEvent()`, `stopPropagation()`).

**Special JS Features/Syntax**

1. **Closest() Method**: This is a modern browser-specific method that allows you to find the closest ancestor element matching a CSS selector. It was introduced in HTML5.
2. **ES6 Class Syntax**: The benchmark uses ES6 class syntax for defining custom classes (`SimpleContextEvent`).

**Alternatives**

1. **Other DOM Query Methods**: Instead of using `closest()`, you could use other DOM query methods like `getElementById()` or `getQuerySelector()` to find the closest ancestor element.
2. **Manual Ancestor Iteration**: You could implement a manual loop that iterates over the ancestors of an element, similar to the while loop approach used in the benchmark.
3. **Using a Library**: Depending on your use case and performance requirements, you might consider using a library like `jsdom` or `cheerio` to simplify DOM manipulation and query execution.

Keep in mind that the choice of implementation will depend on the specific requirements of your project and the trade-offs between performance, readability, and maintainability.

Related benchmarks:

Getting a context: closest vs while loop vs event propagation (version: 0)

Comparing performance of: closest with element selector vs while loop + tagName check vs event propagation

Created: one year ago by: Guest

Jump to the latest result

closest with element selector

while loop + tagName check

event propagation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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