Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Custom Event vs Callback (with actual call)
(version: 1)
Comparing performance of:
Custom Event vs Callback
Created:
one year ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=597819" width="100%" height="500px"></iframe>
Callback
789/s
Custom Event
5/s
View exact numbers
Test name
Executions per second
✓
Callback
789 Ops/sec
Custom Event
5 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
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
Native Event listener vs custom EventTarget vs fake listeners array
Custom Event vs Callback
Custom Event vs Callback 2
Custom Event vs Callback with console log
1000 x event listeners vs single event listener with array of 1000 callbacks
Custom Event vs PubSub Single Event
Custom Event vs Callback with console log large
callback vs event
Comments
Confirm delete:
Do you really want to delete benchmark?