Benchmark: Observables: loops versus EventTarget2

Observables: loops versus EventTarget2 (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: 4 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 __ = new EventTarget()

    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 __ = new EventTarget()​    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: 4 years ago)

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

Browser/OS: Chrome 86 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
loop observable	7.6 Ops/sec
EventTarget observable	5.6 Ops/sec

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

What is tested on the provided JSON?

The provided JSON represents two JavaScript microbenchmarks that test the performance of different approaches to implement an observable pattern in JavaScript.

The first benchmark, "loop observable", tests the implementation of an observable pattern using a loop over callbacks. The second benchmark, "EventTarget observable", tests the implementation of an observable pattern using the built-in EventTarget interface.

What options are compared?

The two benchmarks compare the following options:

Loop over callbacks: This approach uses a loop to iterate over a set of callback functions that will be executed when an event is received.
EventTarget implementation: This approach hijacks the EventTarget implementation from a dummy object and uses it to dispatch events to registered listeners.

Pros and Cons of each approach:

Loop over callbacks:

Pros:

Simpler implementation
Less overhead due to the lack of explicit event dispatching

Cons:

Bad failure modes if an exception occurs in one handler, as it will crash the entire loop.
Requires additional error handling mechanisms to prevent this issue.

EventTarget implementation:

Pros:

Better failure modes, as each listener is executed in a separate execution context and can handle exceptions independently.
Uses built-in event dispatching mechanism, which may have performance benefits.

Cons:

More complex implementation due to the need to hijack and manipulate the EventTarget interface.
Additional overhead due to the creation of custom events and the lookup process.

Library used:

The EventTargetObservable benchmark uses a library called EventTarget. This is a dedicated object that provides an implementation of the EventTarget interface, which can be hijacked by the benchmark. The purpose of this library is to provide a simple way to implement event dispatching without having to create a custom implementation from scratch.

Special JS feature or syntax:

The benchmarks use several special JavaScript features and syntax:

Custom events: The EventTargetObservable benchmark uses custom events to dispatch messages between the observable and its listeners.
Set and array methods: The benchmarks use Set and array methods (e.g., addEventListener, removeEventListener) to manage the registered listeners.

Other alternatives:

If you wanted to implement an observable pattern in JavaScript without using a library like EventTarget, you could consider alternative approaches such as:

Using a queue-based implementation
Implementing a custom event dispatching mechanism from scratch
Using a third-party library that provides an observable pattern implementation

However, these alternatives may have trade-offs in terms of complexity, performance, and ease of use.

LLMs can make mistakes. Check important info.

**What is tested on the provided JSON?**

The provided JSON represents two JavaScript microbenchmarks that test the performance of different approaches to implement an observable pattern in JavaScript.

**What options are compared?**

The two benchmarks compare the following options:

1. **Loop over callbacks**: This approach uses a loop to iterate over a set of callback functions that will be executed when an event is received.
2. **EventTarget implementation**: This approach hijacks the `EventTarget` implementation from a dummy object and uses it to dispatch events to registered listeners.

**Pros and Cons of each approach:**

**Loop over callbacks:**

Pros:

* Simpler implementation
* Less overhead due to the lack of explicit event dispatching

Cons:

* Bad failure modes if an exception occurs in one handler, as it will crash the entire loop.
* Requires additional error handling mechanisms to prevent this issue.

**EventTarget implementation:**

Pros:

* Better failure modes, as each listener is executed in a separate execution context and can handle exceptions independently.
* Uses built-in event dispatching mechanism, which may have performance benefits.

Cons:

* More complex implementation due to the need to hijack and manipulate the `EventTarget` interface.
* Additional overhead due to the creation of custom events and the lookup process.

**Library used:**

The `EventTargetObservable` benchmark uses a library called `EventTarget`. This is a dedicated object that provides an implementation of the `EventTarget` interface, which can be hijacked by the benchmark. The purpose of this library is to provide a simple way to implement event dispatching without having to create a custom implementation from scratch.

**Special JS feature or syntax:**

The benchmarks use several special JavaScript features and syntax:

* **Custom events**: The `EventTargetObservable` benchmark uses custom events to dispatch messages between the observable and its listeners.
* **Set and array methods**: The benchmarks use `Set` and array methods (e.g., `addEventListener`, `removeEventListener`) to manage the registered listeners.

**Other alternatives:**

If you wanted to implement an observable pattern in JavaScript without using a library like `EventTarget`, you could consider alternative approaches such as:

* Using a queue-based implementation
* Implementing a custom event dispatching mechanism from scratch
* Using a third-party library that provides an observable pattern implementation

However, these alternatives may have trade-offs in terms of complexity, performance, and ease of use.

Related benchmarks: