Benchmark: Getter / Setter vs Proxy performance

Script Preparation code:

a = 0

data1 = {};
data2 = {};
data3 = {};

handler1 = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (target[prop] = value),
};

proxy1 = new  Proxy(data1, handler1);


handler2 = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (null),
};

proxy2 = new  Proxy(data2, handler2);

handler3 = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (console.error("IMMUTABLE!!!")),
};

proxy3 = new  Proxy(data3, handler3);

data4 = {
  get test() {
    return this._test;
  },
  set test(value) {
    return this._test = value;
  }
};

Tests:

getter / setter
data4.test = Math.random(); a += data4.test;
proxy getter/setter optimized?
proxy1.test = Math.random(); a += proxy1.test;
proxy immutable
proxy2.test = Math.random(); a += proxy2.test;
proxy immutable logging
proxy3.test = Math.random(); a += proxy3.test;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getter / setter
proxy getter/setter optimized?
proxy immutable
proxy immutable logging

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
getter / setter	4851149.5 Ops/sec
proxy getter/setter optimized?	5809769.5 Ops/sec
proxy immutable	2328520.0 Ops/sec
proxy immutable logging	264460.1 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 benchmark and explain what's being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of three different approaches:

1. Getter/Setter with Proxy: Using a proxy to access getter/setter methods on an object.
2. Proxy with Optimized Getter/Setter: A modified version of the above approach where the setter method is optimized to not modify the original object.
3. Immutable Proxy: A variant of the above approach where the setter method logs a message, indicating that the object is immutable.

**Library and Purpose**

The `Proxy` object is a built-in JavaScript object that allows you to create a proxy for an existing object. The purpose of using a proxy in this benchmark is to access getter/setter methods on an object without modifying its underlying state.

**Approaches Compared**

Here's a brief overview of each approach:

1. **Getter/Setter with Proxy**: This approach uses a `Proxy` object to create a new, separate object that inherits the getter/setter behavior from the original object.
	* Pros: Separate modification of the original object is not possible, which can be beneficial for immutable data structures.
	* Cons: Creates an additional copy of the object, which can lead to increased memory usage and slower performance.
2. **Proxy with Optimized Getter/Setter**: This approach modifies the setter method to return `null` when called, effectively disabling its modification capabilities.
	* Pros: Preserves the benefits of using a proxy (separate modification of the original object) while minimizing overhead.
	* Cons: The optimized setter method may not be as expressive or useful as the standard getter/setter behavior.
3. **Immutable Proxy**: This approach logs a message when the setter method is called, indicating that the object is immutable and cannot be modified.
	* Pros: Provides an additional layer of transparency and guarantees about the immutability of the data structure.
	* Cons: May introduce unnecessary overhead due to logging.

**Other Considerations**

* **Memory Usage**: The benchmark may vary depending on the size of the objects being proxied. Larger objects will require more memory to store the proxy, leading to increased overhead.
* **Performance**: The performance difference between these approaches can be significant, especially for large datasets. However, the actual performance impact depends on various factors, such as the specific use case and JavaScript engine optimizations.

**Alternatives**

If you're looking for alternative approaches or want to explore other options, consider:

1. Using `Object.defineProperty` instead of a proxy object.
2. Implementing custom getter/setter functions using `get` and `set` methods on an object.
3. Using a library like Lodash's `get` and `set` functions for access control.

Keep in mind that these alternatives may not provide the exact same behavior or benefits as the approaches tested in this benchmark.

Related benchmarks:

Getter / Setter vs Proxy performance (version: 0)

Comparing performance of: getter / setter vs proxy getter/setter optimized? vs proxy immutable vs proxy immutable logging

Created: 4 years ago by: Guest

Jump to the latest result

getter / setter

proxy getter/setter optimized?

proxy immutable

proxy immutable logging

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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