Benchmark: Custom Event vs Callback

Tests:

Custom Event
let i = 1001; const results = []; 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>

Previous results

Test case name	Result
Custom Event
Callback

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.4.1

View result in a separate tab

Test name	Executions per second
Custom Event	4475.5 Ops/sec
Callback	1758.1 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.

**What is being tested?**

The provided benchmark measures the performance difference between two approaches: `Custom Event` and `Callback`. In this specific test case, both methods are used to dispatch an event in a loop, where the number of iterations is fixed at 1001. The goal is to determine which approach yields better performance.

**Options compared**

There are only two options being compared:

1. **Custom Event**: This method uses the `window.dispatchEvent()` function to dispatch a custom event with the name `'custom:test'`. The event object is created using the `new CustomEvent()` constructor.
2. **Callback**: This method uses an inline function, `cb()`, which logs a message to the console when called.

**Pros and Cons of each approach**

1. **Custom Event**
	* Pros:
		+ Decouples the event handler from the code that dispatches the event.
		+ Can be more flexible and reusable.
	* Cons:
		+ May incur additional overhead due to the creation of a new event object.
2. **Callback**
	* Pros:
		+ Lightweight and easy to implement.
		+ No additional overhead for creating an event object.
	* Cons:
		+ Tightly coupled with the code that dispatches the event.

**Library usage**

Neither of the test cases uses any external libraries, so there are no libraries to describe.

**Special JS features or syntax**

The `CustomEvent` constructor is used, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for creating custom events with additional properties and listeners. The use of this feature suggests that the benchmark aims to measure performance in a real-world scenario where custom events might be used.

**Other considerations**

The test cases focus on measuring the performance difference between two simple event dispatching methods. However, in a real-world application, other factors like event handling complexity, event listener management, and browser-specific quirks may impact performance.

**Alternative approaches**

If you were to implement this benchmark from scratch, you might consider using alternative approaches, such as:

1. **Event listeners**: Instead of creating a custom event object, use an event listener with the `addEventListener()` method.
2. **Message passing**: Use message passing mechanisms like Web Workers or worker threads to dispatch events between threads.
3. **Async/await**: Utilize async/await syntax and promises to handle event handling in a more modern and efficient way.

Keep in mind that these alternatives would require significant changes to the benchmark test case, but they might provide a more accurate representation of real-world performance scenarios.

Related benchmarks:

Custom Event vs Callback (version: 0)

Comparing performance of: Custom Event vs Callback

Created: 4 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):