Benchmark: event delegation (with parent identification) vs local handlers

HTML Preparation code:

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

Script Preparation code:

var templ = document.querySelector(`.content`);

var manyDel = document.querySelector(`.manyDel`);
var manyDelLinks = [];

var manyLoc = document.querySelector(`.manyLoc`);
var manyLocLinks = [];

var x = 0;
function handleEvent(li) {
  x += (li.dataset.x|0);
}

function delHandleEvent(ev) {
  let li = ev.target;
  while (li.tagName !== `LI`) {li = li.parentElement;};
  handleEvent(li);
}

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;
  let li = frag.firstElementChild;
  frag.querySelector(`.link`).addEventListener(`test`, () => handleEvent(li));
  manyLocLinks.push(frag.querySelector(`.link`));
  manyLoc.append(frag);
}

manyDel.addEventListener(`test`, handleEvent);

Tests:

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
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
manyDel	2884.0 Ops/sec
manyLoc	20183.2 Ops/sec

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

LLMs can make mistakes. Check important info.

It appears that you have a test script written in HTML and JavaScript, with two benchmark definitions: `manyLocLinks` and `manyDelLinks`. The script uses the `dispatchEvent()` method to trigger custom events on links.

To answer your question, I'll provide some general guidance on how to approach this problem.

**Benchmarking**

The goal of benchmarking is to measure the performance of a piece of code or a system under various conditions. In this case, you're trying to measure the execution speed of two different scenarios: triggering multiple local links and multiple delegated links.

**Analysis**

To analyze the performance difference between `manyLocLinks` and `manyDelLinks`, I'd recommend:

1. **Simplifying the test script**: Remove any unnecessary code or complex logic that might be affecting the results.
2. **Using a consistent environment**: Ensure that both benchmark definitions are run in the same browser, device platform, and operating system to eliminate environmental factors that might impact performance.
3. **Increasing sample size**: Run multiple executions for each scenario to reduce variability in the results.

**Solution**

To improve the performance of `manyDelLinks`, I'd suggest:

1. **Cache the events**: Consider caching the event objects or using a more efficient way to create them, such as using a template engine like Handlebars (as shown in your example).
2. **Use a more efficient dispatch mechanism**: Instead of using `dispatchEvent()` for each link, consider using a single dispatch mechanism that can handle multiple links concurrently.
3. **Profile the code**: Use profiling tools to identify performance bottlenecks and optimize those areas.

For `manyLocLinks`, I'd recommend:

1. **Reduce the number of events**: Consider reducing the number of local links being triggered to see if there's a significant performance impact.
2. **Use a more efficient event handling mechanism**: Explore alternative event handling mechanisms, such as using a queue or a worker thread.

**Next Steps**

To further investigate and improve the performance of both benchmark definitions, I'd recommend:

1. **Run multiple iterations**: Run each scenario multiple times to gather more accurate results.
2. **Use profiling tools**: Use browser developer tools or third-party profiling libraries to identify performance bottlenecks.
3. **Optimize specific areas**: Focus on optimizing specific areas of the code that are causing performance issues.

By following these steps, you should be able to gain a better understanding of the performance differences between `manyLocLinks` and `manyDelLinks`.

Related benchmarks:

event delegation (with parent identification) vs local handlers (version: 3)

Comparing performance of: manyDel vs manyLoc

Created: 6 years ago by: Registered User

Jump to the latest result

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):