Benchmark: event listener test: window vs element - listeners in preparation code

HTML Preparation code:

<input id='input1' />
<input id='input2' />
<input id='input3' />
<input id='input4' />
<input id='input5' />
<input id='input6' />
<input id='input7' />
<input id='input8' />
<input id='input9' />
<input id='input10' />

Script Preparation code:

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const input4 = document.getElementById('input4');
const input5 = document.getElementById('input5');
const input6 = document.getElementById('input6');
const input7 = document.getElementById('input7');
const input8 = document.getElementById('input8');
const input9 = document.getElementById('input9');
const input10 = document.getElementById('input10');

///// input biz
const onKeyDown = (e) => console.log({e});

input1.addEventListener('keydown', onKeyDown, false);
input2.addEventListener('keydown', onKeyDown, false);
input3.addEventListener('keydown', onKeyDown, false);
input4.addEventListener('keydown', onKeyDown, false);
input5.addEventListener('keydown', onKeyDown, false);
input6.addEventListener('keydown', onKeyDown, false);
input7.addEventListener('keydown', onKeyDown, false);
input8.addEventListener('keydown', onKeyDown, false);
input9.addEventListener('keydown', onKeyDown, false);
input10.addEventListener('keydown', onKeyDown, false);

// window biz
const listener = (id) => (e) => {
  if (e.target.id === id) {
    console.log(e.target)
  }
}

window.addEventListener('keydown', listener('input1'), false);
window.addEventListener('keydown', listener('input2'), false);
window.addEventListener('keydown', listener('input3'), false);
window.addEventListener('keydown', listener('input4'), false);
window.addEventListener('keydown', listener('input5'), false);
window.addEventListener('keydown', listener('input6'), false);
window.addEventListener('keydown', listener('input7'), false);
window.addEventListener('keydown', listener('input8'), false);
window.addEventListener('keydown', listener('input9'), false);
window.addEventListener('keydown', listener('input10'), false);

Tests:

1 event listener on every input(10)
input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));
1 window event listener for every input(10)
input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1 event listener on every input(10)
1 window event listener for every input(10)

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.

Let's break down the provided benchmark definition and explain what's being tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark is designed to compare two approaches:

1. Adding 10 event listeners to individual HTML input elements (one listener per element).
2. Creating a single window-level event listener that listens for keyboard events on all 10 input elements.

**Options Compared**

The two options being compared are:

* **Option A**: Individual event listeners for each input element.
	+ Pros:
		- Each event listener can focus on a specific input element, making it easier to manage complex event handling scenarios.
		- Less overhead due to the smaller number of listeners.
	+ Cons:
		- More listeners mean more work for the browser, increasing processing time and potentially leading to performance issues in high-contention environments.
* **Option B**: A single window-level event listener that listens for keyboard events on all 10 input elements.
	+ Pros:
		- Less overhead due to a smaller number of listeners.
		- Can be more efficient for handling keyboard events, as the browser only needs to process one set of events.
	+ Cons:
		- Each input element must be explicitly passed to the listener function, which can make event handling more complex and prone to errors.

**Libraries Used**

None are explicitly mentioned in the provided benchmark definition. However, it's likely that some libraries or frameworks might be used under the hood to simplify event handling or improve performance (e.g., React, Angular, Vue.js).

**Special JavaScript Features/Syntax**

The test doesn't appear to utilize any special JavaScript features or syntax beyond standard ECMAScript 2022 support.

**Other Considerations**

When choosing between these two options, consider the following factors:

* **Complexity**: If you need to handle complex event handling scenarios for individual input elements, Option A might be a better choice. However, if most events are keyboard-related and can be handled uniformly across all elements, Option B could be more efficient.
* **Scalability**: As the number of input elements increases, Option B might become more attractive due to its reduced overhead.
* **Code Maintenance**: With Option A, each event listener is self-contained and easier to maintain. However, with Option B, a single function needs to handle all keyboard events for multiple elements.

In conclusion, while both options have their pros and cons, the choice ultimately depends on your specific use case, requirements, and preferences.

Related benchmarks:

event listener test: window vs element - listeners in preparation code (version: 0)

whats faster? - 10 event listeners on window - 1 event listener on 10 inputs

Comparing performance of: 1 event listener on every input(10) vs 1 window event listener for every input(10)

Created: 3 years ago by: Guest

Jump to the latest result

1 event listener on every input(10)

1 window event listener for every input(10)

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