Benchmark: Single window vs multiple input handlers

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');

Tests:

Single window handler
const onKeyDown = (e) => console.log({e}); const handlers = new Map(); const multiListener = (e) => { if (handlers.has(e.target)) { handlers.get(e.target)(e) } } window.addEventListener('keydown', multiListener, false); handlers.set(input1, onKeyDown); handlers.set(input2, onKeyDown); handlers.set(input3, onKeyDown); handlers.set(input4, onKeyDown); handlers.set(input5, onKeyDown); handlers.set(input6, onKeyDown); handlers.set(input7, onKeyDown); handlers.set(input8, onKeyDown); handlers.set(input9, onKeyDown); handlers.set(input10, onKeyDown); for(var i=0; i<100; i++){ 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'})); }
Multiple input handlers
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); for(var i=0; i<100; i++){ 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
Single window handler
Multiple input handlers

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 benchmark and its test cases.

**Benchmark Definition**

The benchmark is designed to compare two approaches for handling keyboard events in a web application:

1. **Single window handler**: A single event listener is attached to a global `window` object, listening for the `keydown` event on multiple input fields.
2. **Multiple input handlers**: Each input field has its own individual event listener attached to it, listening for the `keydown` event.

**Options Compared**

The benchmark compares the performance of these two approaches:

* **Single window handler**: A single global event listener is used, which means that all input fields share the same event listener.
* **Multiple input handlers**: Each input field has its own individual event listener, which means that each field can respond independently to keyboard events.

**Pros and Cons**

**Single Window Handler:**

Pros:

* Simplifies code and reduces overhead (fewer event listeners to create and manage).
* Can be more efficient in terms of memory usage and garbage collection.

Cons:

* If one input field is affected by an error or bug, it can cause issues for all other fields.
* May lead to slower performance if the global event listener needs to process a large number of events.

**Multiple Input Handlers:**

Pros:

* Each input field can respond independently to keyboard events without affecting others.
* Can be more robust and reliable, as each field can handle its own errors or bugs.

Cons:

* Requires more code and overhead (more event listeners to create and manage).
* May lead to slower performance due to the increased number of event listeners.

**Library/Technology Used**

The benchmark uses JavaScript and HTML5 features such as `window.addEventListener()`, `input.dispatchEvent()`, and `KeyboardEvent`. The browser's native implementation of these features is used, which provides a good balance between performance and ease of use.

**Special JS Feature/Syntax**

None mentioned in this benchmark. However, it's worth noting that some JavaScript features or syntax may impact the performance of the benchmark, such as:

* `let` and `const` declarations
* Function expressions vs. function declarations
* Promises vs. callbacks

These factors can affect the performance of the event listener creation and garbage collection processes.

**Benchmark Result**

The latest benchmark result shows that the **Single window handler** approach outperforms the **Multiple input handlers** approach, with an average of 78.66 executions per second compared to 0.45 executions per second for the multiple-input-handlers approach. However, it's essential to note that this is just one benchmark result and may not reflect the performance characteristics of your specific application or use case.

In conclusion, this benchmark provides valuable insights into the performance differences between a single global event listener and individual event listeners for each input field in JavaScript applications. By understanding these trade-offs, developers can make informed decisions about how to optimize their code for optimal performance.

Related benchmarks:

Single window vs multiple input handlers (version: 0)

Comparing performance of: Single window handler vs Multiple input handlers

Created: 3 years ago by: Registered User

Jump to the latest result

Single window handler

Multiple input handlers

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