Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
callback vs event
(version: 1)
Comparing performance of:
event vs callback
Created:
one year ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
event
callback
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=591633" width="100%" height="500px"></iframe>
callback
361K/s
event
1K/s
View exact numbers
Test name
Executions per second
✓
callback
360,733 Ops/sec
event
1,384 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
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
creation
creating new object vs changing fields
objct vs function
objct1 vs function1
Nullish vs If
listener test
listener test1
Comments
Confirm delete:
Do you really want to delete benchmark?