Benchmark: event listener test: window vs element - listeners in preparation code w/ separated inputs

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' />

<input id='window1' />
<input id='window2' />
<input id='window3' />
<input id='window4' />
<input id='window5' />
<input id='window6' />
<input id='window7' />
<input id='window8' />
<input id='window9' />
<input id='window10' />

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');

const window1 = document.getElementById('window1');
const window2 = document.getElementById('window2');
const window3 = document.getElementById('window3');
const window4 = document.getElementById('window4');
const window5 = document.getElementById('window5');
const window6 = document.getElementById('window6');
const window7 = document.getElementById('window7');
const window8 = document.getElementById('window8');
const window9 = document.getElementById('window9');
const window10 = document.getElementById('window10');

///// 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('window1'), false);
window.addEventListener('keydown', listener('window2'), false);
window.addEventListener('keydown', listener('window3'), false);
window.addEventListener('keydown', listener('window4'), false);
window.addEventListener('keydown', listener('window5'), false);
window.addEventListener('keydown', listener('window6'), false);
window.addEventListener('keydown', listener('window7'), false);
window.addEventListener('keydown', listener('window8'), false);
window.addEventListener('keydown', listener('window9'), false);
window.addEventListener('keydown', listener('window10'), 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)
window1.dispatchEvent(new Event('focus')); window1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window2.dispatchEvent(new Event('focus')); window2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window3.dispatchEvent(new Event('focus')); window3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window4.dispatchEvent(new Event('focus')); window4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window5.dispatchEvent(new Event('focus')); window5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window6.dispatchEvent(new Event('focus')); window6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window7.dispatchEvent(new Event('focus')); window7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window8.dispatchEvent(new Event('focus')); window8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window9.dispatchEvent(new Event('focus')); window9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); window10.dispatchEvent(new Event('focus')); window10.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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "event listener test: window vs element - listeners in preparation code w/ separated inputs", measures the performance of two approaches for handling events:

1. **Window event listeners**: Attaching an event listener to the `window` object instead of individual elements (inputs).
2. **Element event listeners**: Attaching an event listener to each input element individually.

**Script Preparation Code**

The script preparation code defines ten input elements and their corresponding window elements. It then sets up two types of event listeners:

*   Input event listeners: Each input element is attached with a separate event listener that logs the `target` property when the `keydown` event occurs.
*   Window event listener: A single event listener is attached to the `window` object, which logs the target element when the `keydown` event occurs.

**Benchmark Results**

The latest benchmark results show two execution counts per test:

1.  **Window event listeners**: 6643 executions per second (with a raw UA string of "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36").
2.  **Element event listeners**: 2177 executions per second.

**Comparison**

The results indicate that attaching an event listener to the `window` object instead of individual elements leads to a significant performance improvement, with about 3 times more executions per second (6643 vs 2177). This suggests that the window event listener approach is more efficient than the element-based approach for handling events.

**Reasoning**

There are several possible reasons why the window event listener approach performs better:

*   **Event delegation**: When using a single event listener on the `window` object, it can delegate to other elements as needed, reducing the overhead of attaching and detaching listeners.
*   **Context preservation**: The `target` property in the event listener is preserved when using a window-based event listener, making it easier to access information about the element that triggered the event.
*   **Cache effects**: Modern browsers may cache results from event listeners on the `window` object, reducing the number of times these listeners are reattached and detached.

However, there might be cases where the element event listener approach is preferred:

*   **Specificity**: Element-based event listeners can provide more specificity when attaching or overriding events.
*   **Event filtering**: Individual elements may need to filter out certain events based on their specific requirements.

In general, the choice between window and element-based event listeners depends on the specific requirements of your application and the trade-offs you're willing to make in terms of performance vs. flexibility.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
1 event listener on every input(10)	2177.3 Ops/sec
1 window event listener for every input(10)	6643.0 Ops/sec

Related benchmarks:

event listener test: window vs element - listeners in preparation code w/ separated inputs (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: 2 years ago by: Registered User

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>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):