Benchmark: Proxy v object v class setter

Script Preparation code:

var cp = 0;
var cs = 0;
var object = {};
class Settable {
    set value(v) {
        if (cs++ % 7 == 0) v += cs;
        this._value = v;
    }
};
var setter = new Settable();
var proxy = new Proxy({}, {
    set(target, prop, receiver) {
        if (cp++ % 7 == 0) prop += cp;
        return Reflect.set(target, prop, receiver);
    }
});

Tests:

Object param
object.value = 'data';
class setter
setter.value = 'data';
Proxy setter
proxy.value = 'data';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object param
class setter
Proxy setter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 OPR/78.0.4093.147

Browser/OS: Opera 78 on Windows 7

View result in a separate tab

Test name	Executions per second
Object param	10230804.0 Ops/sec
class setter	2334002.0 Ops/sec
Proxy setter	1254927.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches for setting a value on an object in JavaScript:

1. **Object Property Setting**: Directly assigning a value to an object property using dot notation (e.g., `object.value = 'data';`).
2. **Class Setter Method**: Using a setter method defined within a class to set the value (e.g., `setter.value = 'data';`).
3. **Proxy Setter Method**: Utilizing a Proxy object with a setter function to set the value (e.g., `proxy.value = 'data';`).

**Library and Features**

In this benchmark, the following JavaScript features/libraries are used:

* None

There are no special JS features or syntaxes being tested in this benchmark. The focus is solely on comparing the performance of these three approaches.

**Benchmarked Options**

The three options being compared are:

1. **Object Property Setting**: Directly setting a value on an object property using dot notation.
2. **Class Setter Method**: Using a setter method defined within a class to set the value.
3. **Proxy Setter Method**: Utilizing a Proxy object with a setter function to set the value.

**Pros and Cons of Each Approach**

1. **Object Property Setting**:
	* Pros: Simple, widely supported, and familiar syntax for most developers.
	* Cons: May not be as efficient or optimized for certain use cases.
2. **Class Setter Method**:
	* Pros: Can provide additional logic or validation before setting the value, which might improve performance in some scenarios.
	* Cons: Requires defining a class and a setter method, adding overhead to the code.
3. **Proxy Setter Method**:
	* Pros: Allows for more complex logic or validation during the setting process, potentially leading to better performance.
	* Cons: Requires creating a Proxy object and defining a setter function, which can add complexity to the code.

**Benchmark Preparation Code**

The provided Script Preparation Code defines three variables:

* `cp` (counter): Used in the Proxy setter method to increment a value when setting the property.
* `cs` (counter): Used in the Class setter method to increment a value when setting the property.
* `object`: An empty object on which the tests will be performed.
* `setter` and `proxy`: Instances of the Settable class and a Proxy object, respectively.

**Benchmark Test Cases**

The three test cases are defined as separate objects, each specifying a different benchmark definition:

1. **Object param**: Sets the value using dot notation (`object.value = 'data';`).
2. **Class setter**: Sets the value using the Class Setter Method (`setter.value = 'data';`).
3. **Proxy  setter**: Sets the value using the Proxy Setter Method (`proxy.value = 'data';`).

**Benchmark Results**

The latest benchmark results show the performance of each test case across different browsers and devices:

| Test Name | Browser | Device Platform | Operating System | Executions Per Second |
| --- | --- | --- | --- | --- |
| Object param | Opera 78 | Desktop | Windows 7 | 10230804.0 |
| Class setter | Opera 78 | Desktop | Windows 7 | 2334002.0 |
| Proxy  setter | Opera 78 | Desktop | Windows 7 | 1254927.5 |

**Alternatives and Considerations**

When deciding between these approaches, consider the following:

* If simplicity and familiarity are essential, Object Property Setting might be a good choice.
* If additional logic or validation is needed, Class Setter Method or Proxy Setter Method could provide benefits.
* Performance-critical code may benefit from using Proxy Setter Method for its potential optimization.

Keep in mind that this benchmark is focused on the specific use case of setting an object property value. Other factors might influence the performance choice in different scenarios.

Related benchmarks:

Proxy v object v class setter (version: 0)

Comparing performance of: Object param vs class setter vs Proxy setter

Created: 4 years ago by: Guest

Jump to the latest result

Object param

class setter

Proxy setter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):