Run results for: Observables: loops versus EventTarget

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/

Run details:

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

Browser: Chrome 87

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
loop observable	31.4 Ops/sec
EventTarget observable	22.7 Ops/sec

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

Tests:

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

Run results for: Observables: loops versus EventTarget

loop observable

EventTarget observable