Benchmark: Observables: loops versus EventTarget (3 listeners)

Observables: loops versus EventTarget (3 listeners) (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 = 3, 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());
EventTarget observable
run_test(new EventTargetObservable());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
loop observable
EventTarget observable

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome Mobile 103 on Android 7.0

View result in a separate tab

Test name	Executions per second
loop observable	2.5 Ops/sec
EventTarget observable	1.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**What is being tested?**

The benchmark compares two approaches for implementing observables in JavaScript:

1. **Loop-based approach**: This method uses a loop to iterate over a set of handlers, which are functions that will be executed when an event occurs.
2. **EventTarget-based approach**: This method hijacks the built-in `EventTarget` implementation from the DOM, which provides a better failure mode for independent listeners.

**Options being compared**

The benchmark compares two options:

1. **Loop-based observable (LoopObservable)**: This is the first option being tested. It uses a loop to iterate over a set of handlers.
2. **EventTarget-based observable (EventTargetObservable)**: This is the second option being tested. It hijacks the built-in `EventTarget` implementation from the DOM.

**Pros and Cons**

**Loop-based observable (LoopObservable)**

Pros:

* Simple to implement
* Easy to understand

Cons:

* Has bad failure modes, as an exception in one handler will crash the entire loop.
* Silently swallows errors by wrapping the invocation in a try/catch block.

**EventTarget-based observable (EventTargetObservable)**

Pros:

* Provides a better failure mode for independent listeners, as each handler runs in its own execution context.
* Has built-in support for event dispatching and handling.

Cons:

* More complex to implement
* Requires hijacking the built-in `EventTarget` implementation from the DOM.

**Other considerations**

The benchmark also considers the overhead of using the native `EventTarget` mechanism, which includes looking up events by their names instead of using direct object references. Additionally, the `EventTargetObservable` implementation creates a custom text node to simulate an event dispatcher, which may introduce additional overhead.

**Library and purpose**

The `EventTarget` library is not explicitly mentioned in the benchmark definition, but it's implied that the built-in `EventTarget` implementation from the DOM is being hijacked. The purpose of this approach is to provide a better failure mode for independent listeners, as each handler runs in its own execution context.

**Special JS feature or syntax**

The benchmark uses the `CustomEvent` constructor to create custom events, which is not explicitly mentioned in the JavaScript specification. However, it's a widely supported feature in modern browsers.

In summary, the benchmark compares two approaches for implementing observables in JavaScript: the loop-based approach and the event-target based approach. The event-target based approach provides better failure modes and has built-in support for event dispatching and handling, but is more complex to implement.

Related benchmarks: