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});
}

​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 = 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());
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: 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 4 months ago):

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:

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.
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:

Loop-based observable (LoopObservable): This is the first option being tested. It uses a loop to iterate over a set of handlers.
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.

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.

Related benchmarks: