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

Historical Performance Data aggregated from 32 community runs

Desktop Results:

Chrome 21 runs

Signal access

37.8M/s

object define properties

37.4M/s

Proxy access

29.0M/s

Fastest: Signal access (1.3x faster)

View exact numbers

✓ Signal access: 37,846,132 ops/sec
• object define properties: 37,410,240 ops/sec
• Proxy access: 29,037,590 ops/sec

Firefox 5 runs

object define properties

1055.9M/s

Proxy access

226.2M/s

Signal access

147.7M/s

Fastest: object define properties (7.1x faster)

View exact numbers

✓ object define properties: 1,055,883,904 ops/sec
• Proxy access: 226,217,712 ops/sec
• Signal access: 147,686,576 ops/sec

Mobile Results:

Chrome 6 runs

Signal access

19.2M/s

object define properties

16.5M/s

Proxy access

14.5M/s

Fastest: Signal access (1.3x faster)

View exact numbers

✓ Signal access: 19,237,146 ops/sec
• object define properties: 16,491,350 ops/sec
• Proxy access: 14,485,620 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

Signal access

142.6M/s

object define properties

141.6M/s

Proxy access

55.4M/s

View exact numbers

Test name	Executions per second
✓ Signal access	142,602,560 Ops/sec
object define properties	141,573,376 Ops/sec
Proxy access	55,443,232 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.

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

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

Created: 3 years ago by: Guest

Go to the latest result

Proxy access

Signal access

object define properties

Historical Performance Data aggregated from 32 community runs

Desktop Results:

Chrome 21 runs

Firefox 5 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 3 years ago by: Guest

Go to the latest result

Proxy access

Signal access

object define properties

Historical Performance Data aggregated from 32 community runs

Desktop Results:

Chrome 21 runs

Firefox 5 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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