Benchmark: Access to Proxy vs Object vs Signal big-mistqke

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;
    }
});
var object = {
    value: 'data'
};
var proxy = new Proxy(object, {})
var 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: 11 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
Proxy access	55443232.0 Ops/sec
Signal access	142602560.0 Ops/sec
object define properties	141573376.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of accessing properties on three different objects: Proxy, Signal, and Object. The benchmark defines two types of accesses: direct property access (e.g., `obj.value`) and indirect access through getters and setters (e.g., `obj.get('value')`).

**Options Compared**

1. **Proxy**: A proxy object is created using the `Proxy` constructor, which wraps another object (in this case, an object with a single property `value`). Proxy provides more fine-grained control over property access, allowing for custom getter and setter functions to be defined.
2. **Signal**: A signal object is created using the `Signal` class, which provides a simple way to expose the value of the object through getters and setters. The signal object is returned as an array, with the first element being the getter function and the second element being the setter function.
3. **Object**: A plain object is used, where property access is straightforward and does not involve any additional overhead.

**Pros and Cons**

1. **Proxy**:
	* Pros: provides more control over property access, can be used to implement complex logic around property updates.
	* Cons: requires creating a separate proxy object, may introduce unnecessary complexity for simple use cases.
2. **Signal**:
	* Pros: provides a simple and straightforward way to expose an object's value through getters and setters, eliminates the need for creating a separate proxy object.
	* Cons: may not be suitable for complex scenarios where fine-grained control is required.
3. **Object**:
	* Pros: straightforward and easy to use, no additional overhead or complexity.
	* Cons: lacks fine-grained control over property access.

**Library Usage**

The `Proxy` constructor and the `Signal` class are part of the JavaScript Standard Library, which provides a way to create proxy objects and signal objects, respectively. The `Reflect.get` function is used in the `proxyWithHandler` test case to implement custom getter logic for the proxy object.

**Special JS Features or Syntax**

None mentioned explicitly, but it's worth noting that the use of arrow functions (e.g., `sigData.bind(v)`), template literals (not present in this benchmark), and modern JavaScript features (e.g., classes, destructuring) may be used elsewhere in the codebase.

**Alternatives**

Other alternatives for creating proxy-like behavior include:

1. **Object.defineProperty**: can be used to define getters and setters on an object, but lacks the flexibility of a full-fledged proxy object.
2. **WeakRef**: can be used to create a weak reference to an object, which can be used to implement some aspects of proxy behavior.

However, for most use cases, using a dedicated `Proxy` constructor or creating a custom implementation is likely the best approach.

Related benchmarks:

Access to Proxy vs Object vs Signal big-mistqke (version: 0)

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

Created: 2 years 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):