Benchmark: proxy vs getter/setter vs prototype getter/setter

Script Preparation code:

const obj = { x:1, y:2, z:3 };
const native = { _x:1, _y:2, _z:3, get x() { return this._x; }, set x(v) { this._x = v + 10; },
                get y() { return this._y; }, set y(v) { this._y = v + 10; },
                get z() { return this._z; }, set z(v) { this._z = v + 10; } }

const proxyFactory = (obj) => new Proxy(structuredClone(obj), {
    set(target, prop, value) {
      if (!Object.hasOwn(target, prop)) {
        throw new Error();
      }

      target[prop] = value + 10;
      return true;
    },
  });

const gsFactory = (obj) => {
  const gs = { __internal: structuredClone(obj) };
  for(let k in gs.__internal) {
    Object.defineProperty(gs, k, {
      get() {
        return this.__internal[k];
      },
      set(value) {
        this.__internal[k] = value + 10;
      }
    })
  }
  return gs;
}

function Factory() {
  this.__internal = structuredClone(obj);
}

for(let k in obj) {
  Object.defineProperty(Factory.prototype, k,{
    get() {
      return this.__internal[k];
    },
    set(value) {
      this.__internal[k] = value + 10;
    }
  })
}

const protoFactory = () => new Factory();

const run = (sut, times = 1000) => {
  let i = times;
  let y = 0;
  while (i--) {
    sut.x = i + 2
    sut.y = i + 1
    sut.z = i
    y += sut.x + sut.y + sut.z
  }
  return y;
}


const runMany = (f, obj) => {
  const sut = f(obj);
  let i = 1000;
  let y = 0;
  while (i--) {
    y += run(sut, 10)
  }
  return y;
}

window.proxyFactory = proxyFactory;
window.gsFactory = gsFactory;
window.protoFactory = protoFactory;
window.run = run;
window.runMany = runMany;
window.native = native;
window.obj = obj;
window.proxy = proxyFactory(obj);
window.gs = gsFactory(obj);
window.proto = protoFactory();

Tests:

proxy
return run(proxy);
getter/setter
return run(gs);
prototype getter/setter
return run(proto);
native
return run(native);
many proxy
return runMany(proxyFactory, obj);
many getter/setter
return runMany(gsFactory, obj);
many prototype getter/setter
return runMany(protoFactory, obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
proxy
getter/setter
prototype getter/setter
native
many proxy
many getter/setter
many prototype getter/setter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
proxy	8511.6 Ops/sec
getter/setter	115552.7 Ops/sec
prototype getter/setter	111269.4 Ops/sec
native	5072.8 Ops/sec
many proxy	763.1 Ops/sec
many getter/setter	413.0 Ops/sec
many prototype getter/setter	1173.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different approaches for accessing and modifying properties in JavaScript objects.

**Approaches Compared**

There are four main approaches compared in this benchmark:

1. **Native Getter/Setter**: The native getter and setter syntax is used, which involves defining a property with a getter and setter function.
2. **Prototype Getter/Setter**: A prototype-based approach is used, where the getter and setter functions are defined on the object's prototype.
3. **Proxy**: A Proxy object is created to intercept property access and modification.
4. **Factory Function**: A factory function is used to create an object with getter and setter functions.

**Pros and Cons of Each Approach**

1. **Native Getter/Setter**
	* Pros: Simple and straightforward, easy to understand.
	* Cons: May incur additional overhead due to the need to define getter and setter functions separately.
2. **Prototype Getter/Setter**
	* Pros: Allows for more flexibility in defining getter and setter functions, can be used with multiple inheritance.
	* Cons: Can lead to tighter coupling between classes, may result in slower performance due to prototype lookup.
3. **Proxy**
	* Pros: Provides a high degree of control over property access and modification, can be used with multiple objects.
	* Cons: More complex to implement, requires understanding of Proxy objects and their configuration options.
4. **Factory Function**
	* Pros: Allows for encapsulation of getter and setter logic within a single function, can reduce coupling between classes.
	* Cons: May add unnecessary complexity due to the need to create a factory function.

**Benchmark Results**

The benchmark results show that:

* Prototype Getter/Setter is the fastest approach, with an average execution rate of 1643.89 executions per second.
* Native Getter/Setter is slightly slower, with an average execution rate of 1461.19 executions per second.
* Proxy is the slowest approach, with an average execution rate of 391.49 executions per second.
* Factory Function is also relatively slow, with an average execution rate of 78.15 executions per second.

**Conclusion**

The benchmark results suggest that Prototype Getter/Setter is the most efficient approach for accessing and modifying properties in JavaScript objects, followed closely by Native Getter/Setter. The Proxy and Factory Function approaches are significantly slower, likely due to their increased complexity and overhead.

Related benchmarks:

proxy vs getter/setter vs prototype getter/setter (version: 0)

Comparing performance of: proxy vs getter/setter vs prototype getter/setter vs native vs many proxy vs many getter/setter vs many prototype getter/setter

Created: 3 years ago by: Guest

Jump to the latest result

proxy

getter/setter

prototype getter/setter

native

many proxy

many getter/setter

many prototype getter/setter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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