Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
custom events vs pubSub
(version: 0)
Comparing performance of:
pubSub vs custom event
Created:
2 years ago
by:
Guest
Jump to the latest result
Tests:
pubSub
class PubSub { constructor() { this.topics = new Map(); } subscribe(topic, callback) { if (!this.topics.has(topic)) { this.topics.set(topic, new Set()); } this.topics.get(topic).add(callback); } publish(topic, data) { if (!this.topics.has(topic)) { return; } this.topics.get(topic).forEach((callback) => { callback(data); }); } unsubscribe(topic, callback) { if (!this.topics.has(topic)) { return; } this.topics.get(topic).delete(callback); } unsubscribeAll(topic) { if (!this.topics.has(topic)) { return; } this.topics.delete(topic); } } const pubSub = new PubSub(); let i = 1001; const results = []; pubSub.subscribe('custom', (e) => {}) while (--i) { pubSub.publish('custom', 'test') }
custom event
let i = 1001; const results = []; while (--i) { window.dispatchEvent(new CustomEvent('custom:test')); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
pubSub
custom event
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The benchmark being measured on MeasureThat.net is the performance difference between two approaches for broadcasting events to multiple subscribers: Publishing using a Pub/Sub (Publish-Subscribe) pattern versus Broadcasting using Custom Events. **Pub/Sub Pattern** In this approach, a central hub (`pubSub`) maintains a map of topics and their corresponding sets of callbacks. When an event is published, the hub iterates through all registered callbacks for that topic and executes them with the provided data. The test case creates an instance of `PubSub`, subscribes to a custom topic `'custom'`, and then publishes this topic repeatedly in a loop while measuring performance. **Custom Events** In this approach, Custom Events are used to broadcast events. A Custom Event is created using `window.dispatchEvent()` and passed along with the event data. When the event is dispatched, all registered listeners (in this case, an empty function) for that custom event will be executed with the provided data. The test case creates a `while` loop that dispatches a large number of Custom Events for the same custom topic `'custom'` while measuring performance. **Options Compared** Two primary options are being compared here: 1. **Pub/Sub Pattern**: This approach is generally more flexible and decoupling-friendly, as it allows for loosely coupled event producers (publishers) and consumers (subscribers). It also provides more fine-grained control over the subscription process. 2. **Custom Events**: Custom Events provide a lightweight, browser-based event mechanism that doesn't require the creation of an external hub or listener registration. However, they might not be as flexible or maintainable for large-scale applications. **Pros and Cons** **Pub/Sub Pattern** Pros: * More decoupling-friendly * Fine-grained control over subscription process * Scalability Cons: * Might introduce additional overhead due to map lookups and callback iterations **Custom Events** Pros: * Lightweight and easy to use * Browser-based event mechanism doesn't require external setup Cons: * Less flexible and maintainable for large-scale applications * Limited decoupling capabilities **Library Used** In the provided benchmark, `window.dispatchEvent()` is used as the Custom Event library. This is a built-in JavaScript function that allows you to dispatch events on the global window object. **Special JS Features/Syntax** None of the code uses any special JavaScript features or syntax beyond what's standard in modern browsers. **Alternative Approaches** Other approaches for broadcasting events might include: * **Event Emitters**: These are similar to Pub/Sub but might provide more fine-grained control over event emission and subscription. * **Channel-based Event Systems**: These systems use channels or pipes to convey events between producers and consumers, providing a high degree of decoupling. The choice of approach ultimately depends on the specific requirements and constraints of your application. MeasureThat.net's benchmark can help you compare performance characteristics of these approaches in a controlled environment.
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?