Benchmark: Native Event listener vs custom EventTarget vs fake listeners array

Tests:

Native Event listeners
let i = 1001; const results = []; while (--i) { const index = i; window.addEventListener('custom:test', () => { results.push('Native Event listener ' + index); }, {once: true}); } window.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));
Native Event listener with callbacks array
let i = 1001; const callbacks = []; const results = []; while (--i) { const index = i; callbacks.push(() => { results.push('Fake listeners array ' + index); }); } window.addEventListener('custom:test', () => { results.push('Native Event listener ' + index); let i = callbacks.length; while (--i) callbacks[i](); }, {once: true}); window.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));
Custom EventTarget
let i = 1001; const target = new EventTarget(); const results = []; while (--i) { const index = i; target.addEventListener('custom:test', () => { results.push('Custom EventTarget ' + index); }, {once: true}); } target.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));
Custom EventTarget with callbacks array
let i = 1001; const callbacks = []; const target = new EventTarget(); const results = []; while (--i) { const index = i; callbacks.push(() => { results.push('Fake listeners array ' + index); }); } target.addEventListener('custom:test', () => { results.push('Native Event listener ' + index); let i = callbacks.length; while (--i) callbacks[i](); }, {once: true}); target.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));
Fake listeners array
let i = 1001; const callbacks = []; const results = []; while (--i) { const index = i; callbacks.push(() => { results.push('Fake listeners array ' + index); }); } i = callbacks.length; while (--i) callbacks[i]();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native Event listeners
Native Event listener with callbacks array
Custom EventTarget
Custom EventTarget with callbacks array
Fake listeners array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 132 on Android

View result in a separate tab

Test name	Executions per second
Native Event listeners	341.8 Ops/sec
Native Event listener with callbacks array	11287.4 Ops/sec
Custom EventTarget	378.5 Ops/sec
Custom EventTarget with callbacks array	11822.0 Ops/sec
Fake listeners array	42331.5 Ops/sec

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 measures the performance of three approaches for handling event listeners:

1. Native Event Listener: Adding an event listener to the `window` object using the `addEventListener` method.
2. Custom Event Target: Creating a custom `EventTarget` instance and adding an event listener to it using the `addEventListener` method.
3. Fake Listeners Array: Creating an array of callback functions and executing them in a loop.

**Options Compared**

The benchmark compares the performance of these three approaches:

* Native Event Listener vs Custom Event Target
* Native Event Listener vs Fake Listeners Array
* Custom Event Target vs Fake Listeners Array

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Native Event Listener**
	* Pros:
		+ Simple and straightforward to implement.
		+ Fast and efficient, as it uses the browser's native event handling mechanism.
	* Cons:
		+ Can lead to memory leaks if not properly cleaned up.
2. **Custom Event Target**
	* Pros:
		+ Allows for more control over event handling and can be useful in certain situations (e.g., when working with third-party libraries).
	* Cons:
		+ Requires creating a custom `EventTarget` instance, which can add overhead.
3. **Fake Listeners Array**
	* Pros:
		+ Can be useful for testing or debugging purposes, as it allows for easy creation and execution of fake event listeners.
	* Cons:
		+ Can lead to performance issues if the array is large or if many listeners are executed.

**Library and Purpose**

The `EventTarget` class is a built-in JavaScript class that represents an object that can emit events. It's used in web browsers to manage events and allow for more control over event handling.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax that would require additional explanation.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few:

* Using a library like `event-listener` to handle events in a more lightweight and efficient way.
* Implementing a custom event handling system using Web Workers or other parallel computing techniques.
* Using a different approach altogether, such as using a queue-based system or a message-passing system.

Keep in mind that these alternatives may not be relevant to the specific use case of this benchmark, but they can provide interesting insights into alternative design choices.

Related benchmarks:

Native Event listener vs custom EventTarget vs fake listeners array (version: 2)

Comparing performance of: Native Event listeners vs Native Event listener with callbacks array vs Custom EventTarget vs Custom EventTarget with callbacks array vs Fake listeners array

Created: 5 years ago by: Registered User

Jump to the latest result

Native Event listeners

Native Event listener with callbacks array

Custom EventTarget

Custom EventTarget with callbacks array

Fake listeners array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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