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}));
x

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

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

 
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]();

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 2 months 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 6 months ago):

Let's break down the benchmark and its test cases.

Benchmark Definition

The benchmark measures the performance of three approaches for handling event listeners:

Native Event Listener: Adding an event listener to the window object using the addEventListener method.
Custom Event Target: Creating a custom EventTarget instance and adding an event listener to it using the addEventListener method.
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:

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.
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.
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.

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: 4 years ago by: Registered User

Jump to the latest result

Native Event listeners

Native Event listener with callbacks array