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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
proxy	796.3 Ops/sec
getter/setter	1473.7 Ops/sec
prototype getter/setter	3978.5 Ops/sec
native	1630.9 Ops/sec
many proxy	69.6 Ops/sec
many getter/setter	145.4 Ops/sec
many prototype getter/setter	400.6 Ops/sec

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

Experimental features:

Fastest: N/A

Slowest: N/A