Benchmark: callback vs event

Tests:

event
const results = []; function cb() { results[0] = 1; } let i = 1001; eventTarget = new EventTarget(); eventTarget.addEventListener('customtype', cb); while (--i) { eventTarget.dispatchEvent(new Event('customtype')); }
callback
const results = []; function cb() { results[0] = 1; } let i = 1001; while (--i) { cb(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
event
callback

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
event	1383.8 Ops/sec
callback	360733.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark titled **"callback vs event"** compares two different methods of executing functions in JavaScript: directly invoking a function (callback) versus using the event dispatch system (event listener).

### Test Cases

1. **Callback Test Case:**
   - **Code:** 
     ```javascript
     const results = [];
     function cb() {
         results[0] = 1;
     }
     let i = 1001;
     while (--i) {
         cb();
     }
     ```
   - **Description:** This test case directly calls the function `cb()` 1000 times in a loop. The purpose of the function is to set the first element of the `results` array to `1`, demonstrating a straightforward and efficient method of calling functions.
   - **Pros/Cons:**
     - **Pros:**
       - Very fast due to the absence of overhead associated with event dispatching.
       - Direct function calls are typically optimized heavily by JavaScript engines.
     - **Cons:**
       - Lacks separation of code and may not represent scenarios where asynchronous operations or event-driven programming is required.

2. **Event Test Case:**
   - **Code:**
     ```javascript
     const results = [];
     function cb() {
         results[0] = 1;
     }
     let i = 1001;
     eventTarget = new EventTarget();
     eventTarget.addEventListener('customtype', cb);
     while (--i) {
         eventTarget.dispatchEvent(new Event('customtype'));
     }
     ```
   - **Description:** In this test, the function `cb()` is registered as a callback to an event listener on an `EventTarget` object. The function is invoked by dispatching an event named `'customtype'` 1000 times. 
   - **Pros/Cons:**
     - **Pros:**
       - Allows for event-driven programming, enabling multiple pieces of code to run in response to events.
       - Separates concerns (the event emission from the event handling), which is beneficial in larger applications.
     - **Cons:**
       - Significantly slower than direct calls due to the overhead of event creation, dispatching, and invocation.
       - Requires additional setup and teardown when working with events, which can complicate the code.

### Benchmark Results

In the benchmark results, we see that the **callback** method executed approximately **592,149.56 executions per second**, while the **event** method executed only about **1,141.85 executions per second**. The stark difference demonstrates that the direct calling of functions (callback) is far more efficient in terms of speed compared to handling function execution through events.

### Other Considerations

- **Use Cases:**
  - The callback approach is typically used in scenarios where performance is critical and there is no need for event-driven architecture.
  - The event-driven approach is useful in UI programming or when working with asynchronous actions (like user interactions, API calls, etc.), making applications responsive to various triggers.

- **Alternatives:**
  - For cases where performance is crucial and simple function calls suffice, **inline functions** or **higher-order functions** could be considered.
  - In more complex applications, frameworks or libraries (such as **RxJS** for reactive programming) can handle complex event streams efficiently.
  - Promises and `async/await` can be alternatives to event handling for asynchronous execution, where understanding control flow and handling results is necessary.

Overall, the benchmark illustrates that while the event-driven model is powerful for certain scenarios, for pure execution speed in function calls, direct invocation remains the superior method.

Related benchmarks:

callback vs event (version: 1)

Comparing performance of: event vs callback

Created: 2 months ago by: Guest

Jump to the latest result

event

callback

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):