Benchmark: Custom Event vs Callback [fixed - apples to apples]

Custom Event vs Callback [fixed - apples to apples] (version: 0)

Fixes https://www.measurethat.net/Benchmarks/Show/17805/0/custom-event-vs-callback by making sure the console log and actual sync code execution happens. There's no point to dispatch an event without ever listening to it. Such benchmark was not realistic.

Comparing performance of: Custom Event vs Callback

Created: one year ago by: Guest

Jump to the latest result

Tests:

Custom Event
function cb() { console.log('hi') } window.addEventListener("customtest", cb); let i = 1001; const results = []; while (--i) { window.dispatchEvent(new CustomEvent('customtest')); }
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: one year ago)

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Custom Event	8.5 Ops/sec
Callback	522.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches: using callbacks (function cb() {...}) and custom events (window.dispatchEvent(new CustomEvent('customtest'))). The goal is to see which approach is faster, dispatching a large number of events.

**Options Compared**

The benchmark tests the following options:

1. **Callback**: A function that takes no arguments and returns nothing. In this case, it simply logs "hi" to the console.
2. **Custom Event**: A custom event dispatched using `window.dispatchEvent()`. This triggers the callback function to be executed.

**Pros and Cons of Each Approach**

1. **Callback**:
	* Pros: Simple, lightweight, and easy to implement. The browser doesn't need to create a new event object or handle the dispatching process.
	* Cons: Can lead to tight coupling between functions, making it harder to manage dependencies. Also, if the callback function is not properly handled (e.g., by forgetting to remove the listener), memory leaks can occur.
2. **Custom Event**:
	* Pros: More flexible and decoupled than callbacks. The browser only needs to handle the dispatching process, while the callback function remains independent.
	* Cons: Requires more overhead due to the creation of a new event object and handling the dispatching process.

**Library Used**

In this benchmark, no specific library is used beyond what's built into JavaScript and HTML5 (e.g., `CustomEvent`).

**Special JS Features or Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax. However, it relies on basic concepts like event listeners, callback functions, and the browser's handling of events.

**Other Alternatives**

If you're looking for alternative approaches to handle event dispatching in JavaScript, consider:

1. **Event Emitters**: A pattern that allows event listeners to be added and removed dynamically.
2. **Observer Pattern**: A design pattern that enables objects to observe changes to other objects without having a direct reference to them.

Keep in mind that each of these alternatives has its pros and cons, depending on the specific use case and requirements.

**Benchmark Preparation Code**

The provided Script Preparation Code is empty, which means it's assumed that the browser environment already set up for benchmarking. This code might be used in other benchmarks or scenarios where setup is necessary.

**Individual Test Cases**

Each test case represents a single iteration of the benchmark:

1. **Custom Event**: Dispatches 1001 custom events with a callback function that logs "hi" to the console.
2. **Callback**: Invokes the callback function 1001 times, logging "hi" to the console each time.

The benchmark result shows the execution frequency per second for each test case (Callback and Custom Event) on the specified browser and device platform.

Related benchmarks: