Benchmark: event listeners window vs input/element via 1 element

HTML Preparation code:

<input id='input' />

Tests:

"on input, 100xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); input.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 100; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on window, 100xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); window.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 100; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on window, 1000xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); window.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 1000; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on window, 10xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); window.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 10; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on input, 1000xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); input.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 1000; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }
"on input, 10xs"
const onKeyDown = (e) => console.log({e}); const input = document.getElementById('input'); input.addEventListener('keydown', onKeyDown, false); input.dispatchEvent(new Event('focus')); for (let i = 0; i < 10; i++) { input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
"on input, 100xs"
"on window, 100xs"
"on window, 1000xs"
"on window, 10xs"
"on input, 1000xs"
"on input, 10xs"

Fastest: N/A

Slowest: N/A

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/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
"on input, 100xs"	3279.0 Ops/sec
"on window, 100xs"	3235.5 Ops/sec
"on window, 1000xs"	370.5 Ops/sec
"on window, 10xs"	3204.7 Ops/sec
"on input, 1000xs"	330.4 Ops/sec
"on input, 10xs"	3062.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark tests the performance difference between using `addEventListener` to attach an event listener to an HTML element versus attaching it directly to the `window` object. The test creates a single input field, dispatches focus and keypress events on it, and measures the number of executions per second for both approaches.

**Options Compared**

The benchmark compares two options:

1. **`addEventListener`**: Attaching the event listener to the input element using `addEventListener`.
2. **Direct Window Attachment**: Attaching the event listener directly to the `window` object.

**Pros and Cons**

* **`addEventListener`**:
	+ Pros: More flexible, allows for easier removal of listeners, and is generally considered a better practice.
	+ Cons: May incur additional overhead due to the need to iterate over all registered listeners when dispatching an event.
* **Direct Window Attachment**:
	+ Pros: Can be faster since there's no iteration required when dispatching an event.
	+ Cons: Less flexible, and may lead to memory leaks if not properly removed.

**Library Usage**

The benchmark uses the `dispatchEvent` method provided by HTML elements to simulate events. The `KeyboardEvent` class is used to create keyboard-related events.

**Special JS Feature or Syntax**

None mentioned.

**Other Considerations**

* Browser-specific optimizations might affect performance, but this benchmark is designed to run consistently across multiple browsers.
* The number of executions per second (ExecutionsPerSecond) metric provides a measure of the test's focus on performance, rather than other aspects like memory usage or error handling.

**Alternatives**

If you're looking for alternative benchmarks or variations on this theme:

1. **Event Loop Benchmark**: Tests the performance impact of event listener iterations and queue processing.
2. **DOM Mutation Benchmark**: Evaluates the effects of modifying DOM structures, including node insertion and removal.
3. **Window API vs. HTMLElement Comparison**: Compares the performance of different window-related APIs versus element-based approaches.

These benchmarks can provide a more comprehensive understanding of browser-specific optimization techniques and help developers optimize their code for better performance.

Related benchmarks:

event listeners window vs input/element via 1 element (version: 0)

trigger an event listener on 1 input: - on input: 10, 100 + 1k times - on window: 10, 100 + 1k times

Comparing performance of: "on input, 100xs" vs "on window, 100xs" vs "on window, 1000xs" vs "on window, 10xs" vs "on input, 1000xs" vs "on input, 10xs"

Created: 2 years ago by: Guest

Jump to the latest result

"on input, 100xs"

"on window, 100xs"

"on window, 1000xs"

"on window, 10xs"

"on input, 1000xs"

"on input, 10xs"

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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