Benchmark: event delegation: closest vs walk-up

HTML Preparation code:

<ul class='manyC'>
</ul>

<ul class='manyW'>
</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 manyC = document.querySelector(`.manyC`);
var manyCLinks = [];

var manyW = document.querySelector(`.manyW`);
var manyWLinks = [];

var x = 0;
function handleEvent(li) {
  x += (li.dataset.x|0);
}

function cHandleEvent(ev) {
  handleEvent(ev.target.closest(`li`));
}

function wHandleEvent(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;
  manyCLinks.push(frag.querySelector(`.link`));
  manyC.append(frag);

  frag = templ.cloneNode(true).content;
  manyWLinks.push(frag.querySelector(`.link`));
  manyW.append(frag);
}

manyC.addEventListener(`test`, cHandleEvent);
manyW.addEventListener(`test`, wHandleEvent);

Tests:

manyC
manyCLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));
manyW
manyWLinks[(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
manyC
manyW

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.

The task is to analyze the provided benchmark data and generate new test cases based on it.

From the given data, we can observe that there are two types of links being tested: `manyCLinks` and `manyWLinks`. Each link type has multiple instances, and each instance is dispatched an event with a custom event name "test".

To generate new test cases, we need to consider the following:

1. **Randomization**: The original benchmark data uses `Math.random()` to randomly select an index from 0 to `n-1` for each link instance.
2. **Event dispatching**: Each link instance dispatches a custom event with a specific name.

To create new test cases, we can introduce variations in the following aspects:

* Randomization:
	+ Keep the same randomization pattern as the original data.
	+ Introduce new patterns, such as:
		- Alternate between `0` and `n-1`
		- Use modulo arithmetic to select an index
* Event dispatching:
	+ Use different event names or attributes (e.g., `bubbles`, `cancelable`)
	+ Modify the event object sent with the custom event

Here are some potential new test cases:

**Test Case 1: Randomized Index**

```json
{
    "Benchmark Definition": "manyCLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test${Math.floor(Math.random() * 3)}`, {bubbles : true}));",
    "Test Name": "randomizedC"
}
```

**Test Case 2: Alternate Index**

```json
{
    "Benchmark Definition": "manyCLinks[(Math.random() % n)|0].dispatchEvent(new CustomEvent(`test${Math.floor(Math.random() * 3)}`, {bubbles : true}));",
    "Test Name": "alternateC"
}
```

**Test Case 3: Event Attributes**

```json
{
    "Benchmark Definition": "manyCLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test${Math.floor(Math.random() * 3)}`, {bubbles : false, cancelable : true}));",
    "Test Name": "attributesC"
}
```

**Test Case 4: Event Names with Random Prefix**

```json
{
    "Benchmark Definition": "manyCLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test${Math.floor(Math.random() * 3)}-prefix`, {bubbles : true}));",
    "Test Name": "eventNamesC"
}
```

These new test cases introduce variations in the randomization pattern and event dispatching, which can help to identify performance differences or optimize the code.

Please note that these are just examples, and you should adjust the test cases according to your specific use case and requirements.

Related benchmarks:

event delegation: closest vs walk-up (version: 2)

Comparing performance of: manyC vs manyW

Created: 6 years ago by: Registered User

Jump to the latest result

manyC

manyW

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