Benchmark: event delegation vs local handlers

HTML Preparation code:

<ul class='one'>
</ul>

<ul class='manyDel'>
</ul>

<ul class='manyLoc'>
</ul>

<template class='content'>
  <li><a class='link' data-x='2'></a></li>
</template>

Script Preparation code:

var templ = document.querySelector(`.content`);

var one = document.querySelector(`.one`);
one.append(templ.cloneNode(true).content);
var oneLink = one.querySelector(`.link`);

var manyDel = document.querySelector(`.manyDel`);
var manyDelLinks = [];

var manyLoc = document.querySelector(`.manyLoc`);
var manyLocLinks = [];

var x = 0;
function handleEvent(ev) {
  x += (ev.target.dataset.x|0);
}

var n = 1000;
for (let i = 0; i < n; ++i) {
  let frag = templ.cloneNode(true).content;
  manyDelLinks.push(frag.querySelector(`.link`));
  manyDel.append(frag);
  
  frag = templ.cloneNode(true).content;
  frag.querySelector(`.link`).addEventListener(`test`, handleEvent);
  manyLocLinks.push(frag.querySelector(`.link`));
  manyLoc.append(frag);
}

one.addEventListener(`test`, handleEvent);
manyDel.addEventListener(`test`, handleEvent);

Tests:

one
oneLink.dispatchEvent(new CustomEvent(`test`, {bubbles : true}));
manyDel
manyDelLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));
manyLoc
manyLocLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
one
manyDel
manyLoc

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36 EdgA/131.0.0.0

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
one	50839.2 Ops/sec
manyDel	45167.3 Ops/sec
manyLoc	44479.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is an essential task for any software engineer. Let's break down the provided benchmark definition and explanation.

**Benchmark Definition Overview**

The benchmark compares three approaches to event handling:

1. **Event Delegation**: Using a central handler for multiple elements, reducing the number of event listeners.
2. **Local Handlers**: Attaching individual event listeners to each element, increasing the number of listeners.

The benchmark focuses on two specific scenarios:

a. Dispatching an event from a single link element (`oneLink`).
b. Dispatching an event from one of the randomly selected links among multiple elements (`manyDelLinks` or `manyLocLinks`).

**Event Delegation**

In this approach, a single handler function is attached to a parent element, which delegates the event handling to its child elements. The handler checks if the target element matches a specific selector, and if so, it calls the original event handler.

Pros:

* Reduced memory usage due to fewer event listeners.
* Easier maintenance and scalability.

Cons:

* Potential performance overhead when checking for matching elements.
* Less control over event handling flow.

**Local Handlers**

In this approach, each element is assigned an individual event listener. When an event occurs, the corresponding handler function is called.

Pros:

* Explicit control over event handling flow.
* Easier debugging and troubleshooting.

Cons:

* Increased memory usage due to more event listeners.
* Potential performance overhead from multiple handlers.

**Benchmark Considerations**

The benchmark measures the execution time of each approach for both scenarios. The results are likely affected by factors such as:

* Browser and device variations.
* HTML structure and CSS styles.
* JavaScript engine optimizations.

**Library and Special JS Features**

No specific libraries or special JavaScript features are mentioned in the benchmark definition. However, it's worth noting that some modern browsers support advanced event handling features like `requestAnimationFrame()` or `WebAssembly` for optimized performance.

**Alternatives and Future Directions**

If you're interested in exploring alternative approaches to event handling, consider:

* **Event Pooling**: Reusing event listeners across multiple elements.
* **Debounce and Throttle**: Implementing delayed or limited event handling to reduce overhead.
* **Performance-Critical Libraries**: Investigating libraries like `fastdom` or `js-perf` for optimized JavaScript performance.

Keep in mind that the choice of approach depends on the specific use case, application requirements, and trade-offs between performance, maintainability, and scalability.

Related benchmarks:

event delegation vs local handlers (version: 2)

Comparing performance of: one vs manyDel vs manyLoc

Created: 6 years ago by: Registered User

Jump to the latest result

one

manyDel

manyLoc

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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