Benchmark: Access to Proxy vs Object vs Signal 2.1

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Proxy access	302833216.0 Ops/sec
Signal access	150114368.0 Ops/sec
object define properties	1215461248.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark is designed to compare the performance of three different approaches to accessing and modifying values in JavaScript objects: Proxy, Object.defineProperty, and Signal.

**Options being compared:**

1. **Proxy**: A built-in JavaScript feature that allows creating read-only or read-write proxy objects.
2. **Object.defineProperty**: A method for defining properties on an object at runtime.
3. **Signal**: A custom library (described below) designed to provide a simple and efficient way to access and modify values.

**Pros and cons of each approach:**

1. **Proxy**:
	* Pros: Lightweight, efficient, and easy to use. Provides fine-grained control over property access and modification.
	* Cons: Can be slower than Object.defineProperty due to the overhead of creating a proxy object.
2. **Object.defineProperty**:
	* Pros: Fast and efficient, as it uses native code optimizations.
	* Cons: Can be less intuitive and verbose than Proxy, especially for complex scenarios.
3. **Signal**:
	* Pros: Provides a simple and elegant way to access and modify values, with built-in synchronization capabilities.
	* Cons: Requires additional setup and configuration, which can add overhead.

**Signal library:**

The Signal library is a custom implementation designed to provide an efficient and convenient way to access and modify values. It creates a signal object that notifies observers when its value changes. In the benchmark, `createSignal` function is used to create two signals with initial values of `'data'`. The `sigData()` function returns the current value of the signal.

**Special JavaScript feature/syntax:**

* **Proxy**: Introduced in ECMAScript 2015 (ES6), Proxy allows creating read-only or read-write proxy objects.
* **Reflect**: Used in the Signal library for synchronization, Reflect provides a set of methods for working with objects and their properties, such as `Reflect.get` and `Reflect.set`.

**Other alternatives:**

If you prefer to use existing libraries or built-in features instead of Signal, you can consider:

1. **RxJS**: A popular reactive library that provides similar functionality to Signal.
2. **EventSource**: A built-in feature in modern browsers that allows creating event-driven objects.

Keep in mind that these alternatives might require additional setup and configuration compared to using the Signal library.

I hope this explanation helps you understand the benchmark and its components!

Related benchmarks:

Access to Proxy vs Object vs Signal 2.1 (version: 2)

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

Created: 2 years ago by: Registered User

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):