Run results for: custom events vs pubSub custom

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser: Chrome 118

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
pubSub	30.2 Ops/sec
custom event	19.5 Ops/sec

Tests:

pubSub
class PubSub { constructor() { // Keep track of all `onMessage()` listeners with easy lookup by subscription id. this.subscriberOnMsg = {}; // Keep track of the topic for each subscription id for easier cleanup. this.subscriberTopics = {}; // Keep track of all topics and subscriber ids for each topic. this.topics = {}; } /** * Subscribe to messages being published in the given topic. * @param {string} topic - Name of the channel/topic where messages are published. * @param {Function} onMessage - Function called whenever new messages on the topic are published. * @returns {string} ID of this subscription. */ subscribe(topic, onMessage) { // Validate inputs if (typeof topic !== "string") throw new Error("Topic must be a string."); if (typeof onMessage !== "function") throw new Error("onMessage must be a function."); // Each subscription has a unique id const subID = Date.now(); // Create or Update the topic if (!(topic in this.topics)) { // New topic this.topics[topic] = [subID]; } else { // Topic exists this.topics[topic].push(subID); } // Store onMessage and topic separately for faster lookup this.subscriberOnMsg[subID] = onMessage; this.subscriberTopics[subID] = topic; // Return the subscription id return subID; } /** * Publish messages on a topic for all subscribers to receive. * @param {string} topic - The topic where the message is sent. * @param {Object} message - The message to send. Only object format is supported. */ publish(topic, message) { if (typeof topic !== "string") throw new Error("Topic must be a string."); if (typeof message !== "object") { throw new Error("Message must be an object."); } // If topic exists, post messages if (topic in this.topics) { const subIDs = this.topics[topic]; subIDs.forEach((id) => { if (id in this.subscriberOnMsg) { this.subscriberOnMsg[id](message); } }); } } /** * Unsubscribe for a given subscription id. * @param {string} id - Subscription id */ unsubscribe(id) { // Validate inputs if (typeof id !== "string" || !validateUUID(id)) { throw new Error("ID must be a valid UUID."); } // If the id exists in our subscriptions then clear it. if (id in this.subscriberOnMsg && id in this.subscriberTopics) { // Delete message listener delete this.subscriberOnMsg[id]; // Remove id from the topics tracker const topic = this.subscriberTopics[id]; // Cleanup topics if (topic && topic in this.topics) { const idx = this.topics[topic].findIndex((tID) => tID === id); if (idx > -1) { this.topics[topic].splice(idx, 1); } // If there are no more listeners, clean up the topic as well if (this.topics[topic].length === 0) { delete this.topics[topic]; } } // Delete the topic for this id delete this.subscriberTopics[id]; } } } // Example usage: const results = []; const PS = new PubSub(); const subId = PS.subscribe("myTopic", (message) => { console.log({ message }); results.push(message); }); PS.publish("myTopic", { message: "Hello World" }); let i = 10000; while (--i) { PS.publish("myTopic", { message: "Hello World" }); }
custom event
class PubSub { constructor() { // Create a DOM element to serve as the event bus this.eventBus = document.createElement("div"); } /** * Subscribe to events with a given topic. * @param {string} topic - The topic to subscribe to. * @param {Function} callback - The callback function to execute when the event is published. * @returns {Function} - A function to unsubscribe from the topic. */ subscribe(topic, callback) { // Create a unique event type for the topic const eventType = `pubsub_${topic}`; // Define the event handler function const eventHandler = (event) => { callback(event.detail); }; // Add the event handler to the event bus this.eventBus.addEventListener(eventType, eventHandler); // Return an unsubscribe function return () => { this.eventBus.removeEventListener(eventType, eventHandler); }; } /** * Publish an event with a given topic and data. * @param {string} topic - The topic of the event. * @param {any} data - The data to send with the event. */ publish(topic, data) { // Create a unique event type for the topic const eventType = `pubsub_${topic}`; // Create a custom event with the data const customEvent = new CustomEvent(eventType, { detail: data, }); // Dispatch the custom event on the event bus this.eventBus.dispatchEvent(customEvent); } } // Example usage: const PS = new PubSub(); const results = []; // Subscribe to an event PS.subscribe("myTopic", (message) => { console.log({ message }); results.push(message); }); let i = 10000; while (--i) { PS.publish("myTopic", { message: "Hello World" }); }