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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0 Waterfox/56.3

Browser/OS: Firefox 56 on Windows 7

View result in a separate tab

Test name	Executions per second
manyC	74540.1 Ops/sec
manyW	49942.6 Ops/sec

Related benchmarks:

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

Comparing performance of: manyC vs manyW

Created: 4 years ago by: Registered User

Jump to the latest result

manyC

manyW

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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