Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Custom Event vs PubSub Single Event
(version: 0)
Comparing performance of:
Custom Event vs PubSub
Created:
2 years ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
Custom Event
PubSub
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
22 days 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
Embed
Embed Benchmark Result
Test name
Executions per second
Custom Event
5155.2 Ops/sec
PubSub
92500.4 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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:
momentjs isBefore versus lt operator
Moment valueOf vs. new Date().getTime()
Date.now() vs Moment()
MomentJS vs Native test
moment with & without formats, vs moment new Date & moment date.parse
Comments
Confirm delete:
Do you really want to delete benchmark?