Benchmark: Custom Event vs PubSub Single Event

Tests:

Custom Event
let i = 1001; const results = []; while (--i) { window.dispatchEvent(new CustomEvent('custom:test')); }
PubSub
class PubSub { constructor() { this.events = {}; } subscribe(event, callback) { if (!this.events.hasOwnProperty(event)) { this.events[event] = []; } return this.events[event].push(callback); } publish(event, data = {}) { if (!this.events.hasOwnProperty(event)) { return []; } return this.events[event].map((callback) => callback(data)); } } const pubSub = new PubSub(); let i = 1001; const results = []; while (--i) { pubSub.publish('custom', 'test') }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

PubSub

75K/s

Custom Event

3K/s

Fastest: PubSub (22.1x faster)

View exact numbers

✓ PubSub: 75,212 ops/sec
• Custom Event: 3,407 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Custom Event
PubSub

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Linux

View result in a separate tab

PubSub

93K/s

Custom Event

5K/s

View exact numbers

Test name	Executions per second
✓ PubSub	92,500 Ops/sec
Custom Event	5,155 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested in this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark definition provides two test cases:

1. **"Custom Event"**: This test case dispatches `window.dispatchEvent(new CustomEvent('custom:test'))` 1001 times, using a custom event.
2. **"PubSub Single Event"**: This test case uses the Pub/Sub pattern (more on this later) to publish an event with the name "custom" and data "test", 1001 times.

**Options Compared**

The benchmark is comparing two different approaches:

* **Custom Event**: Using `window.dispatchEvent(new CustomEvent('custom:test'))` to dispatch events.
* **Pub/Sub Pattern**: Using a custom Pub/Sub implementation (more on this later) to publish an event.

**Pros and Cons of Each Approach**

1. **Custom Event**:
	* Pros: Easy to implement, straightforward, and widely supported by modern browsers.
	* Cons: May not be optimized for performance, as it relies on the browser's event handling mechanism.
2. **Pub/Sub Pattern**:
	* Pros: Can be more efficient than custom events, especially for large-scale applications, as it allows for decoupling of producers and consumers.
	* Cons: Requires manual management of subscribers, which can lead to complexity and potential performance issues if not implemented correctly.

**Library Used in Test Case**

The test case uses the **Pub/Sub Pattern** library. This implementation provides methods for:

* `subscribe(event, callback)`: Registers a callback function to be executed when the specified event is published.
* `publish(event, data = {})`: Publishes an event with the specified data.

This library allows for decoupling of producers (those publishing events) from consumers (those listening for events), which can lead to more efficient and scalable event handling.

**Special JS Features/Syntax**

There are no specific JavaScript features or syntax used in this benchmark. However, it's worth noting that using `window.dispatchEvent` is a common pattern in web development, but the exact implementation details may vary depending on the browser and environment.

**Other Alternatives**

If you're looking for alternative approaches to event handling, you might consider:

* **Event Emitters**: A library that provides a more robust and efficient way of handling events, similar to Pub/Sub.
* **RxJS (Reactive Extensions)**: A popular JavaScript library for reactive programming, which includes support for event handling and Publish-Subscribe patterns.

In summary, the benchmark is testing two different approaches to event handling in JavaScript:

1. Custom Event using `window.dispatchEvent`
2. Pub/Sub Pattern with a custom implementation

The test case uses the Pub/Sub Pattern library, which provides an efficient way of decoupling producers and consumers.

Custom Event vs PubSub Single Event (version: 0)

Comparing performance of: `Custom Event vs PubSub`

Created: 3 years ago by: Guest

Go to the latest result

Custom Event

PubSub

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Custom Event vs PubSub Single Event (version: 0)

Comparing performance of: Custom Event vs PubSub

Created: 3 years ago by: Guest

Go to the latest result

Custom Event

PubSub

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Custom Event vs PubSub`