Benchmark: Access to Proxy vs Object vs Signal 2.3

Script Preparation code:

class Signal {
  constructor(state) {
    this.value = state;
  }

  get() {
    return this.value; 
  }
  set(newValue) {
    if (newValue !== this.value) {
      this.value = newValue;
    }
  }
}

function createSignal(value) {
  const v = new Signal(value);
  return [v.get.bind(v), v.set.bind(v)];
}
var [sigData, setData] = createSignal({
    value: 'data'
});
var mObject = {_value:'data'};
Object.defineProperty(mObject, 'value', {
    set: function (nv) {
        this._value = nv;
    },
    get: function() {
        return this._value;
    }
});
object = {
    value: 'data'
};
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
    get(target, prop, receiver) {
        return Reflect.get(target, prop, receiver)
    }
})

Tests:

Proxy access
proxy.value
Signal access
sigData().value
object define properties
mObject.value

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Proxy access
Signal access
object define properties

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 142 on Android

View result in a separate tab

Test name	Executions per second
Proxy access	20686800.0 Ops/sec
Signal access	53692060.0 Ops/sec
object define properties	50913084.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various components.

**Benchmark Definition JSON**

The provided JSON represents a JavaScript microbenchmark created using MeasureThat.net. The benchmark consists of three individual test cases:

1.  **Access to Proxy vs Object**: This test case compares the performance of accessing the `value` property through different methods: a proxy, an object with a defined getter and setter, and a plain object.
2.  **Signal Access**: This test case measures the performance of accessing the `value` property through a signal (a special type of observer that notifies when its value changes).
3.  **Object Define Properties**: This test case benchmarks the performance of defining properties on an object.

**Options Compared**

The options being compared are:

*   **Proxy access**: Accessing the `value` property through a proxy object.
*   **Object define properties**: Defining properties on a plain object using `Object.defineProperty`.
*   **Signal access**: Accessing the `value` property through a signal (a special type of observer).

**Pros and Cons**

Here are some pros and cons of each approach:

*   **Proxy Access**
    *   Pros:
        *   Can provide more control over the access to property values.
        *   Can handle complex data structures with multiple getters and setters.
    *   Cons:
        *   Requires creating a proxy object, which can be overhead.
        *   May not perform well for simple property accesses.
*   **Object Define Properties**
    *   Pros:
        *   Simple to implement and understand.
        *   Suitable for most use cases where only basic getters and setters are needed.
    *   Cons:
        *   May lead to slower performance due to the overhead of defining properties.
        *   Limited control over property access behavior.
*   **Signal Access**
    *   Pros:
        *   Provides a way to notify observers when values change, which can be useful for real-time data updates.
        *   Can improve performance by reducing unnecessary computations or DOM updates.
    *   Cons:
        *   Requires creating a signal object and handling subscriptions, which can add complexity.
        *   May not be suitable for all use cases where simple property accesses are sufficient.

**Library/Functionality Used**

The benchmark uses the following libraries and functionalities:

*   **Proxy**: The `Proxy` constructor is used to create proxy objects in the "Proxy access" test case. Proxies allow you to control how properties are accessed on an object.
*   **Object.defineProperty**: This method is used to define properties on a plain object in the "Object define properties" test case. It allows you to specify getter and setter functions for each property.

**Special JS Features/Syntax**

This benchmark does not use any special JavaScript features or syntax, such as async/await, generators, or destructuring.

**Alternatives**

If you need alternative approaches or have specific requirements that aren't covered by these options, consider the following alternatives:

*   **WeakMaps**: WeakMaps can be used to store and retrieve data in a way that's similar to signals. However, they don't provide the same level of control over property access behavior.
*   **Custom getters and setters**: You can create custom getter and setter functions for your objects to achieve more control over property access behavior.
*   **Third-party libraries**: There are third-party libraries available that provide signal-like functionality or other alternative approaches to accessing properties, such as `mobx` or `rxjs`.

Related benchmarks:

Access to Proxy vs Object vs Signal 2.3 (version: 0)

Comparing performance of: Proxy access vs Signal access vs object define properties

Created: one year ago by: Guest

Jump to the latest result

Proxy access

Signal access

object define properties

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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