Benchmark: Direct invoke vs event listener

Script Preparation code:

function createObj() {
    let value = 0;
    return {
        value
    }
}

function createListeners() {
    return Array.from(Array(100), () => createObj());
}


function directObservable() {
    const lists = [];
    return {
        addListener: (l) => lists.push(l),
        notify: (v) => lists.forEach(x => x.value = v)
    };
}

function eventObservable() {
    const target = new EventTarget();

    return {
        addListener: (l) => target.addEventListener('value', (ev) => l.value = ev.detail),
        notify: (v) => target.dispatchEvent(new CustomEvent('value', {
            detail: v
        }))
    };
}

Tests:

direct invoke
const listeners = createListeners(); const directObs = directObservable(); listeners.forEach(x => directObs.addListener(x)); directObs.notify(1); directObs.notify(2); directObs.notify(3); directObs.notify(1); directObs.notify(2); directObs.notify(3);
event listener
const listeners = createListeners(); const eventObs = eventObservable(); listeners.forEach(x => eventObs.addListener(x)); eventObs.notify(1); eventObs.notify(2); eventObs.notify(3); eventObs.notify(1); eventObs.notify(2); eventObs.notify(3);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
direct invoke
event listener

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance difference between two approaches: direct invocation and event listeners.

**Direct Invocation**

In this approach, `createListeners()` creates an array of 100 objects using `Array.from()`. Each object is created by calling `createObj()`, which returns a simple object with a single property `value`.

The `directObservable` function creates an observable object that can listen to the `value` changes. The `addListener` method adds a listener to the observable, and the `notify` method notifies all listeners by updating their `value` properties.

In the benchmark, 10 notifications are sent using `directObs.notify(1)`, `directObs.notify(2)`, ..., `directObs.notify(3)` twice. This simulates a scenario where an observable is being updated multiple times with different values.

**Event Listeners**

The event listener approach uses the `EventTarget` API to create an observable object that can listen to events. The `createListeners()` function creates an array of 100 objects, just like in the direct invocation approach.

However, instead of using a simple observable object like `directObservable`, this approach uses the `EventTarget` API to create an observable. The `addListener` method adds a listener to the target, and the `notify` method dispatches an event with the new value as its detail property.

In the benchmark, 10 notifications are sent using `eventObs.notify(1)`, `eventObs.notify(2)`, ..., `eventObs.notify(3)` twice. This simulates a scenario where an observable is being updated multiple times with different values.

**Comparison**

The main difference between these two approaches is how they handle the notification mechanism. In direct invocation, the observable object updates its internal state directly, whereas in event listeners, the observable object dispatches events to registered listeners.

Here are some pros and cons of each approach:

**Direct Invocation:**

Pros:

* More efficient, as it avoids the overhead of dispatching events
* Can be more predictable, as the observable object's internal state is updated directly

Cons:

* Less flexible, as changes to the observable object cannot be easily propagated to other parts of the program
* May not work well with complex scenarios that require multiple listeners and notifications

**Event Listeners:**

Pros:

* More flexible, as changes to the observable object can be easily propagated to other parts of the program
* Can handle complex scenarios with multiple listeners and notifications

Cons:

* Less efficient, due to the overhead of dispatching events
* May introduce additional latency and complexity in the notification mechanism

**Library Used**

The `EventTarget` API is a built-in JavaScript API that allows you to create observable objects that can listen to events. The `CustomEvent` constructor is used to create custom events with specific properties.

**Special JS Features or Syntax**

None of the provided benchmark code uses any special JavaScript features or syntax, such as async/await, Promises, or modern ES6+ syntax.

**Alternatives**

Other alternatives for creating observables and handling notifications include:

* Redux: a state management library that provides an observable-like API
* RxJS: a reactive programming library that provides an observable-like API
* MobX: a reactive state management library that provides an observable-like API

These libraries can provide more features and flexibility than the built-in `EventTarget` API, but may also introduce additional complexity and overhead.

Related benchmarks:

Direct invoke vs event listener (version: 0)

Comparing performance of: direct invoke vs event listener

Created: 2 years ago by: Guest

Jump to the latest result

direct invoke

event listener

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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