Benchmark: Custom Event vs PubSub

Script Preparation code:

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

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: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 120 on Android

View result in a separate tab

Test name	Executions per second
Custom Event	817.3 Ops/sec
PubSub	32573.4 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 benchmark.

**Benchmark Overview**

The benchmark is designed to compare two approaches for sending events: `Custom Event` and `PubSub`. The goal is to measure which approach is faster, more efficient, or both.

**Benchmark Definition**

The benchmark definition provides a JavaScript class called `PubSub`, which is used by both test cases. The class has two methods:

* `subscribe(event, callback)`: Subscribes to an event and stores the callback function in an array.
* `publish(event, data = {})`: Publishes an event with optional data and executes all subscribed callbacks.

**Test Cases**

There are two individual test cases:

1. **Custom Event**: This test case uses the `window.dispatchEvent()` method to send a custom event named "custom:test". It creates 1000 iterations of this process.
2. **PubSub**: This test case uses the `pubSub.publish()` method to send an event with data. It also creates 1000 iterations of this process.

**Options Compared**

The benchmark compares two options:

* **Custom Event**: Using the `window.dispatchEvent()` method to send events.
* **PubSub**: Using the `pubSub.publish()` method to send events.

**Pros and Cons of Each Approach**

* **Custom Event**:
	+ Pros: Simple, widely supported, and fast.
	+ Cons: May not be as efficient or scalable for large numbers of events.
* **PubSub**:
	+ Pros: More efficient and scalable for large numbers of events.
	+ Cons: Requires more setup (creating the `PubSub` class) and may have overhead due to event handling.

**Library Used**

The benchmark uses the `PubSub` library, which is a simple implementation of a publish-subscribe pattern. The library provides two methods: `subscribe()` and `publish()`.

**Special JS Features or Syntax**

Neither test case uses any special JavaScript features or syntax beyond standard ECMAScript 2020 features.

**Other Considerations**

* **Browser Support**: Both test cases are run on Chrome Mobile 120, which may not be representative of all browsers.
* **Device Platform**: The benchmark is run on a mobile device (Android), which may have different performance characteristics compared to desktop devices.
* **Execution Count**: The benchmark runs 1000 iterations of each test case, which may not be sufficient for identifying performance differences in real-world scenarios.

**Alternatives**

There are other publish-subscribe patterns and event-handling mechanisms available in JavaScript, such as:

* EventEmitters (Node.js)
* RxJS (Reactive Extensions for JavaScript)
* EventSource (WebSockets)

These alternatives may offer different trade-offs in terms of performance, scalability, and ease of use.

Related benchmarks:

Custom Event vs PubSub (version: 0)

Comparing performance of: Custom Event vs PubSub

Created: 2 years ago by: Guest

Jump to the latest result

Custom Event

PubSub

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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