Run results for: Observables: loops with try/catch 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/

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser: Firefox 149

Operating system: Linux

Device Platform: Desktop

Date tested: 15 days ago

Test name	Executions per second
loop observable	32.1 Ops/sec
EventTarget observable	27.6 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) {
            try {
                fn(...message);
            } catch (error) {
                console.error(error);
            }
        }
    };
};

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 = 5, 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 with try/catch versus EventTarget

loop observable

EventTarget observable