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') }

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: 5 days ago)

User agent: Mozilla/5.0 (Linux; U; Android 14; zh-CN; V2118A Build/UP1A.231005.007) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/100.0.4896.58 UWS/5.12.4.0 Mobile Safari/537.36 AliApp(DingTalk/7.6.10.4) com.alibaba.android.rimet.aliding/PIS616957032125768704 Channel/exclusive_dingtalk_21001 language/zh-CN 2ndType/exclusive abi/64 xpn/vivo UT4Aplus/0.2.25 colorScheme/light

Browser/OS: Chrome 100 on Android

View result in a separate tab

Test name	Executions per second
Custom Event	231.2 Ops/sec
PubSub	20542.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Related benchmarks:

Custom Event vs PubSub Single Event (version: 0)

Comparing performance of: Custom Event vs PubSub

Created: one year ago by: Guest

Jump to the latest result

Custom Event

PubSub

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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