Benchmark: Custom Event vs Callback with console log

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>

Previous results

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

Test name	Executions per second
Custom Event	2.2 Ops/sec
Callback	97.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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 with console log (version: 0)

Comparing performance of: Custom Event vs Callback

Created: 3 years 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 llama3.2:3b, generated one year ago):