Benchmark: EventTarget vs custom observable implementation

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

class CustomTarget {
   constructor() {
     this.listeners = {}; 
   }
  
  on(eventName, listener) {
    if (!(eventName in this.listeners)) {
       this.listeners[eventName] = new Set(); 
    }
    
    this.listeners[eventName].add(listener);
  }
  
  off(eventName, listener) {
    this.listeners[eventName]?.delete(listener); 
  }
    
  send(eventName, ...data) {
     if (!this.listeners[eventName]) {
       return 0; 
     }
    
      for (let fn of this.listeners[eventName]) {
			fn(...data);
      }
    
      return this.listeners[eventName].count;
  }
}
 
const listeners = 10;
const events = 1000;
    
const setupCustom = () => {
  const target = new CustomTarget();
  
  let total = 0;
  for (let i = 0; i < listeners; i++) {
    target.on('foo', (inc) => { total = total + inc });
  }
    
  return () => {
     for (let i = 0; i < events; i++) {
       target.send('foo', 5);
     }
    }
}
    
const setupNative = () => {
    const target = new EventTarget();
    let total = 0;
  for (let i = 0; i < listeners; i++) {
    target.addEventListener('foo', (e) => { total = total + e.detail });
  }
    
  return () => {
     for (let i = 0; i < events; i++) {
		const customEvent = new CustomEvent('foo', { detail: 5 });
		target.dispatchEvent(customEvent);
     }
    }
}
    
const runCustomInt = setupCustom();
const runNative = setupNative();
    
function runCustom() {
  runCustomInt();    
}

Tests:

custom
runCustom();
native
runNative();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
custom
native

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 18 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Linux

View result in a separate tab

Test name	Executions per second
custom	6533.7 Ops/sec
native	426.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark compares two approaches to event handling in JavaScript: the native `EventTarget` implementation provided by the browser and a custom implementation utilizing a simple observable pattern. The main goal is to explore the performance differences between these two options in handling events.

### Options Compared

1. **Custom Implementation (`CustomTarget`):**
   - This implementation uses a JavaScript class, `CustomTarget`, which maintains a dictionary of event listeners mapped to event names. It provides methods for adding (`on`), removing (`off`), and triggering events (`send`) with associated data.
   - In the benchmark, ten listeners are registered to respond to an event called 'foo', and 1,000 events are dispatched with a data payload of 5.

2. **Native Implementation (`EventTarget`):**
   - This is the built-in event handling mechanism available in modern browsers. The `EventTarget` interface allows for adding (`addEventListener`), removing (`removeEventListener`), and dispatching events (`dispatchEvent`).
   - Similar to the custom implementation, ten listeners are attached to the 'foo' event, but the event is dispatched as a `CustomEvent`, which allows for including additional event data in its detail property.

### Pros and Cons

#### Custom Implementation:
**Pros:**
- **Simplicity**: The `CustomTarget` class is straightforward and provides a clear understanding of how event handling works under the hood.
- **Control**: Developers can modify the implementation as needed to fit specific use cases or optimizations.

**Cons:**
- **Performance Limitations**: The custom implementation might not be as optimized as the native one, depending on various factors like how JavaScript engines optimize built-in features.
- **Lack of Features**: Native events often come with additional capabilities (e.g., event bubbling, capturing, etc.) that a custom solution may miss.

#### Native Implementation:
**Pros:**
- **Browser Optimization**: Native event handling is generally optimized for performance by the browser vendors, and it might take advantage of low-level optimizations that a custom implementation cannot access.
- **Feature-Rich**: It supports additional functionalities, including event propagation and more complex use cases.

**Cons:**
- **Complexity**: Understanding the event model (e.g., bubbling vs. capturing, event pools) can be more complex for new developers.
- **Overhead**: Depending on the implementation, there may be some performance overhead associated with the added features and behaviors.

### Other Considerations

- **Execution Speed**: The benchmark results show that the custom implementation executes approximately 1789.03 events per second, while the native implementation executes around 163.19 events per second. This significant difference indicates that the custom solution is much quicker for processing events in this particular case.
- **Use Case Context**: The actual choice between these implementations should depend on the application’s specific requirements. If high performance with simple event handling suffices, the custom implementation may be preferable. However, in cases requiring the full feature set of event handling (including bubbling and complex event data), the native `EventTarget` may be necessary.
  
### Alternative Approaches

- **Third-Party Libraries**: Libraries like RxJS offer reactive programming techniques for managing events and data flows, providing a robust observable model that can handle additional complexities beyond basic event handling.
- **Frameworks**: Libraries and frameworks (like React or Vue) may have their own event systems, adding layers of abstraction and performance, but also potentially increasing complexity.
  
In conclusion, software engineers must weigh the trade-offs between the simplicity and speed of custom implementations against the full feature set and potential performance optimizations of native solutions, considering the specific context of their applications. Choosing between these different methodologies will largely depend on the needs of the project in question and the overall architecture of the application.

Related benchmarks:

EventTarget vs custom observable implementation (version: 1)

Compares browser's built-in "EventTarget" with custom similar implementation

Comparing performance of: custom vs native

Created: one month ago by: Guest

Jump to the latest result

custom

native

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):