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;

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

proxy getter/setter optimized?

4.9M/s

getter / setter

4.0M/s

proxy immutable

1.7M/s

proxy immutable logging

254K/s

Fastest: proxy getter/setter optimized? (19.4x faster)

View exact numbers

✓ proxy getter/setter optimized?: 4,933,311 ops/sec
• getter / setter: 4,022,260 ops/sec
• proxy immutable: 1,749,227 ops/sec
• proxy immutable logging: 254,149 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
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: 14 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:155.0) Gecko/20100101 Firefox/155.0

Browser/OS: Firefox 155 on Linux

View result in a separate tab

getter / setter

8.7M/s

proxy immutable

5.0M/s

proxy getter/setter optimized?

4.3M/s

proxy immutable logging

139K/s

View exact numbers

Test name	Executions per second
✓ getter / setter	8,667,103 Ops/sec
proxy immutable	5,006,864 Ops/sec
proxy getter/setter optimized?	4,267,409 Ops/sec
proxy immutable logging	138,511 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.

Getter / Setter vs Proxy performance (version: 0) Benchmark.js

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

Created: 5 years ago by: Guest

Go to the latest result

getter / setter

proxy getter/setter optimized?

proxy immutable

proxy immutable logging

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Getter / Setter vs Proxy performance (version: 0) Benchmark.js

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

Created: 5 years ago by: Guest

Go to the latest result

getter / setter

proxy getter/setter optimized?

proxy immutable

proxy immutable logging

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 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: `getter / setter vs proxy getter/setter optimized? vs proxy immutable vs proxy immutable logging`