Benchmark: Observables: loops versus EventTarget

Observables: loops versus EventTarget (version: 0)

When the “observable” pattern is implemented in JavaScript, it's practically always done using a loop over callbacks. One problem with this approach is that an exception in one handler will crash the entire loop. You can work around this by wrapping the invocation in a try/catch block, but in doing so, you silently swallow the error. The browser provides an event dispatcher for DOM elements that runs each handler in a separate execution context, providing a better failure mode for independent listeners. `EventTarget` is an interface, so you can't directly instantiate one. But you can hijack the `EventTarget` implementation from a dummy object. This test compares multi-listener dispatches using loops and the built-in `EventTarget`. My expectation is that the native mechanism will carry some overhead, partly because of the bespoke execution context, and partly because of the extra properties instantiated on each `CustomEvent` instance. This method also has to look up events by their (string) names, rather than using direct object reference. See http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/

Comparing performance of: loop observable vs EventTarget observable

Created: 8 years ago by: Guest

Jump to the latest result

Script Preparation code:

function LoopObservable() {
	const listeners = new Set();
	this.on = fn => listeners.add(fn);
	this.off = fn => listeners.delete(fn);
	this.clear = () => listeners.clear();
	
	// This has bad failure modes.
	this.send = function(...message) {
		for (let fn of listeners)
			fn(...message);
	};
};

function EventTargetObservable() {
	// Name is arbitrary because we're using a dedicated object.  Use a shorter
	// name for shorter lookup.
	const NAME = '.';
	const __ = document.createTextNode(null);
	
	this.on = function(handler) {
		__.addEventListener(NAME, event => {
			handler(event.detail);
		});
	};
	
	this.off = function(handler) {
		__.removeEventListener(NAME, handler);
	};
	
	this.send = function(detail) {
		__.dispatchEvent(new CustomEvent(NAME, {detail}));
	};
}

function run_test(observable, handlers = 2, calls = 1000) {
	for (let i = 0; i < handlers; i++)
		observable.on(message => console.log(i, message));
	
	for (let i = 0; i < calls; i++)
		observable.send({type: "hello", i});
}

​x
 
​function LoopObservable() {    const listeners = new Set();    this.on = fn => listeners.add(fn);    this.off = fn => listeners.delete(fn);    this.clear = () => listeners.clear();        // This has bad failure modes.    this.send = function(...message) {        for (let fn of listeners)            fn(...message);    };};​function EventTargetObservable() {    // Name is arbitrary because we're using a dedicated object.  Use a shorter    // name for shorter lookup.    const NAME = '.';    const __ = document.createTextNode(null);        this.on = function(handler) {        __.addEventListener(NAME, event => {            handler(event.detail);        });    };        this.off = function(handler) {        __.removeEventListener(NAME, handler);    };        this.send = function(detail) {        __.dispatchEvent(new CustomEvent(NAME, {detail}));    };}​function run_test(observable, handlers = 2, calls = 1000) {    for (let i = 0; i < handlers; i++)        observable.on(message => console.log(i, message));        for (let i = 0; i < calls; i++)        observable.send({type: "hello", i});}​

Tests:

loop observable
run_test(new LoopObservable());
run_test(new LoopObservable());
EventTarget observable
run_test(new EventTargetObservable());
run_test(new EventTargetObservable());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
loop observable
EventTarget observable

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
loop observable	740.4 Ops/sec
EventTarget observable	476.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark definition json represents two test cases: "loop observable" and "EventTarget observable". These tests compare the performance of implementing the "observable" pattern in JavaScript using two different approaches:

Loop over callbacks: This approach uses a loop to iterate over an array of callback functions, which are added to a set of listeners. When a message is sent, each listener function is called with the message as an argument.
EventTarget: This approach uses the built-in EventTarget interface in JavaScript to dispatch events. An event target object is created, and listeners are added using the addEventListener method. When a message is sent, an event is dispatched with the message as its detail property.

Options compared:

Loop over callbacks vs. EventTarget
Native Chrome implementation vs. custom implementation

Pros and cons of each approach:

Loop over callbacks:
- Pros:
  - Simple to implement
  - Can be faster for small datasets or one-off use cases
- Cons:
  - Can lead to silent failures if an exception occurs in a listener function
  - May not perform well with many listeners or large datasets
EventTarget:
- Pros:
  - Provides better failure modes, as exceptions are caught by the event dispatcher
  - More suitable for use cases with multiple listeners or large datasets
- Cons:
  - Requires creating an event target object and handling events
  - May have additional overhead due to the bespoke execution context

Library:

The EventTargetObservable implementation uses a custom EventTarget class, which is a dedicated object for dispatching events. The addEventListener method is used to attach listeners, and dispatchEvent is used to send an event with a message.

Special JS feature or syntax:

This benchmark does not use any special JavaScript features or syntax beyond the standard language definition.

Other alternatives:

In addition to the two approaches mentioned above, other alternatives for implementing observables in JavaScript include:

RxJS: A popular library for reactive programming that provides a more robust and scalable solution for handling asynchronous data streams.
Promise-based observables: Another approach to implementing observables using promises instead of callbacks or event dispatching.

While these alternatives offer different trade-offs, they can be useful in specific scenarios or when working with complex use cases.

In summary, the "loop observable" and "EventTarget observable" benchmarks on MeasureThat.net compare two approaches for implementing the "observable" pattern in JavaScript. The loop over callbacks approach is simple but may lead to silent failures, while the EventTarget approach provides better failure modes but requires additional setup.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

1. **Loop over callbacks**: This approach uses a loop to iterate over an array of callback functions, which are added to a set of listeners. When a message is sent, each listener function is called with the message as an argument.
2. **EventTarget**: This approach uses the built-in `EventTarget` interface in JavaScript to dispatch events. An event target object is created, and listeners are added using the `addEventListener` method. When a message is sent, an event is dispatched with the message as its detail property.

**Options compared:**

* Loop over callbacks vs. EventTarget
* Native Chrome implementation vs. custom implementation

**Pros and cons of each approach:**

1. **Loop over callbacks**:
	* Pros:
		+ Simple to implement
		+ Can be faster for small datasets or one-off use cases
	* Cons:
		+ Can lead to silent failures if an exception occurs in a listener function
		+ May not perform well with many listeners or large datasets
2. **EventTarget**:
	* Pros:
		+ Provides better failure modes, as exceptions are caught by the event dispatcher
		+ More suitable for use cases with multiple listeners or large datasets
	* Cons:
		+ Requires creating an event target object and handling events
		+ May have additional overhead due to the bespoke execution context

**Library:**

The `EventTargetObservable` implementation uses a custom `EventTarget` class, which is a dedicated object for dispatching events. The `addEventListener` method is used to attach listeners, and `dispatchEvent` is used to send an event with a message.

**Special JS feature or syntax:**

This benchmark does not use any special JavaScript features or syntax beyond the standard language definition.

**Other alternatives:**

In addition to the two approaches mentioned above, other alternatives for implementing observables in JavaScript include:

1. **RxJS**: A popular library for reactive programming that provides a more robust and scalable solution for handling asynchronous data streams.
2. **Promise-based observables**: Another approach to implementing observables using promises instead of callbacks or event dispatching.

While these alternatives offer different trade-offs, they can be useful in specific scenarios or when working with complex use cases.

Related benchmarks: