Benchmark: Custom Event vs Callback (with actual call)

Tests:

Custom Event
let i = 1001; const results = []; window.addEventListener('custom:test', function () { console.log('hi'); }); while (--i) { window.dispatchEvent(new CustomEvent('custom:test')); }
Callback
function cb() { console.log('hi') } let i = 1001; const results = []; while (--i) { cb(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Custom Event
Callback

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Custom Event	5.0 Ops/sec
Callback	789.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two different methodologies for executing functions in JavaScript: using a `Custom Event` and using a direct `Callback` function. The tests aim to measure how efficiently each approach executes a loop of function calls.

### Test Cases Explained

1. **Custom Event:**
   - **Test Case Code:**
     ```javascript
     let i = 1001;
     const results = [];
     window.addEventListener('custom:test', function () {
       console.log('hi');
     });
     while (--i) {
       window.dispatchEvent(new CustomEvent('custom:test'));
     }
     ```
   - **Description:** In this test, a `Custom Event` named `custom:test` is dispatched multiple times (1000 iterations). Each time the event is dispatched, an event listener on the `window` object triggers a callback that logs "hi" to the console.
   - **Pros:**
     - **Decoupling:** Custom events provide a way to decouple the event generation from the event handling, which can lead to cleaner architecture in larger applications.
     - **Flexibility:** They allow for passing additional data and handling multiple listeners.
   - **Cons:**
     - **Overhead:** There is additional overhead associated with event dispatching and listening, which makes this approach slower than calling a function directly.
     - **Potential for Callback Hell:** In more complex scenarios, using numerous event handlers can lead to increased complexity and difficult-to-manage code.

2. **Callback:**
   - **Test Case Code:**
     ```javascript
     function cb() {
       console.log('hi');
     }
     let i = 1001;
     const results = [];
     while (--i) {
       cb();
     }
     ```
   - **Description:** This test directly calls a callback function `cb()` that logs "hi" in a loop of 1000 iterations.
   - **Pros:**
     - **Performance:** Direct function calls are typically much faster because they eliminate the overhead of event handling.
     - **Simplicity:** This approach is more straightforward and easier to understand, especially for simpler use cases.
   - **Cons:**
     - **Tight coupling:** Directly calling the function means that the function and its invocation context are tightly coupled, which can be less flexible for more complex event-driven architectures.

### Benchmark Results

The results indicate the following:

- **Callbacks (Executions Per Second): 788.98**
- **Custom Events (Executions Per Second): 5.02**

This significant discrepancy in performance demonstrates that directly calling a function (`Callback`) is vastly more efficient than dispatching and handling a custom event (`Custom Event`).

### Conclusion and Alternatives

When designing systems, choosing between these two methods depends on the context:

- **Use Callbacks** when performance is a critical factor, especially in tightly looped cases where function calls are frequent.
- **Use Custom Events** when the design requires decoupled components or event-driven architectures where flexibility is paramount.

### Other Alternatives

In addition to these two methods, there are other ways of managing event handling and function execution in JavaScript, such as:

- **Promises and Async/Await:** For managing asynchronous operations.
- **Observables (e.g., RxJS):** For reactive programming where data streams are favored.
- **Web Workers:** For running tasks in background threads to avoid blocking the main thread, particularly in long-running computations.

Each approach carries its pros and cons, which should be evaluated based on the use case to achieve the best performance and maintainability.

Related benchmarks:

Custom Event vs Callback (with actual call) (version: 1)

Comparing performance of: Custom Event vs Callback

Created: one year ago by: Guest

Jump to the latest result

Custom Event

Callback

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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