Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Custom Event vs Callback with console log
(version: 0)
Comparing performance of:
Custom Event vs Callback
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
Custom Event
let i = 1001; const results = []; while (--i) { window.dispatchEvent(new CustomEvent('custom:test')); } window.addEventListener('custom:test', () => console.log('hi'))
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:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Browser/OS:
Chrome 106 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=493238" width="100%" height="500px"></iframe>
Callback
97/s
Custom Event
2/s
View exact numbers
Test name
Executions per second
✓
Callback
97 Ops/sec
Custom Event
2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Definition and Test Cases** The benchmark definition represents a JavaScript code snippet that is used to test the performance of two different approaches: `Custom Event` and `Callback`. The test cases are: 1. **Custom Event**: This approach uses the `CustomEvent` API to dispatch an event with a custom name (`"custom:test"`). The event listener function, which logs "hi" to the console, is attached to the `window` object using `addEventListener`. The code snippet creates 1000 iterations of this pattern. 2. **Callback**: This approach uses a simple callback function that logs "hi" to the console. Similar to the Custom Event approach, it also creates 1000 iterations. **Options Compared** The two approaches are compared in terms of performance, which is measured as `ExecutionsPerSecond` (EPS). EPS represents how many times each approach executes the code snippet per second. **Pros and Cons** 1. **Custom Event**: * Pros: Can be useful for testing event-driven programming scenarios where events have a specific payload. * Cons: May introduce overhead due to the creation of custom events, which may not be applicable in all situations. 2. **Callback**: * Pros: Simple and straightforward approach that is easy to understand and implement. * Cons: Does not provide much insight into event-driven programming scenarios. **Other Considerations** * **Library Usage**: Neither of these test cases uses any external libraries, so no special library-specific considerations are needed. * **Special JS Features/Syntax**: Neither of these approaches relies on special JavaScript features or syntax beyond basic JavaScript (e.g., `let`, `const`, `while`, `addEventListener`). **Benchmark Preparation Code and Alternative Approaches** The provided benchmark preparation code is minimal, as the actual test cases are embedded directly within the benchmark definition. Alternative approaches to these benchmarks might include: * **Event Loop Optimization**: This could involve testing different strategies for optimizing event loop performance, such as using microtasks or Web Workers. * **Debounce/ClearTimeout**: This could involve testing the performance of debouncing and clearing timeouts in various scenarios. Keep in mind that MeasureThat.net is specifically designed to test JavaScript performance, so alternative approaches would likely be variations on this theme.
Related benchmarks
Custom Event vs Callback
Getting a context: while loop vs event propagation with new events vs event propagation with callbacks
Custom Event vs Callback with console log large
Comments
Confirm delete:
Do you really want to delete benchmark?