Benchmark: Custom Event vs Callback with console log large

Tests:

Custom Event
let i = 10001; 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 = 10001; 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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Custom Event	3.8 Ops/sec
Callback	82.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its options.

**Benchmark Description**

The benchmark measures the performance difference between two approaches for handling asynchronous events in JavaScript: Custom Events and Callbacks.

**Options Compared**

The benchmark compares the performance of:

1. **Custom Events**: Using a custom event named "custom:test" dispatched via `window.dispatchEvent()` followed by an event listener attached to `window.addEventListener()`. When the event is received, it logs "hi" to the console.
2. **Callback**: Invoking a callback function (`cb`) 10,001 times using a while loop and logging "hi" to the console inside the callback.

**Pros and Cons of Each Approach**

1. **Custom Events**:
	* Pros: More flexible and efficient way to handle asynchronous events in modern browsers.
	* Cons: Requires setting up an event name, listener, and handling errors (if any).
2. **Callback**:
	* Pros: Simple and widely supported, works well with older browsers or environments without Custom Events support.
	* Cons: Less efficient than Custom Events and can lead to callback hell (nested function calls).

**Library Usage**

In this benchmark, the `CustomEvent` class is used from the `window` object, which is a built-in part of the DOM API in modern browsers. This library provides a standard way to create custom events.

**Special JavaScript Feature/Syntax**

No special JavaScript features or syntax are used beyond what's already mentioned (e.g., `CustomEvents`, callbacks). However, the benchmark assumes that the browser supports the `window.dispatchEvent()` and `window.addEventListener()` methods.

**Other Alternatives**

If Custom Events aren't supported by the target browsers, other alternatives for handling asynchronous events include:

1. WebSockets
2. XMLHttpRequests (for more complex scenarios)
3. Polling-based approaches with intervals

Keep in mind that each alternative has its pros and cons, and the choice ultimately depends on the specific use case and requirements.

I hope this explanation helps!

Related benchmarks:

Custom Event vs Callback with console log large (version: 0)

Comparing performance of: Custom Event vs Callback

Created: one year 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):