Run results for: Getter / Setter vs Proxy vs Events

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Browser: Safari 18

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

getter / setter

124.6M/s

plain object

123.8M/s

proxy

114.9M/s

events (kinda cheating)

71.8M/s

events

29.5M/s

View exact numbers

Test name	Executions per second
✓ getter / setter	124,633,624 Ops/sec
plain object	123,755,208 Ops/sec
proxy	114,878,832 Ops/sec
events (kinda cheating)	71,781,656 Ops/sec
events	29,539,504 Ops/sec

Script Preparation code:

data1 = {};
handler = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (target[prop] = value),
};
proxy = new  Proxy(data1, handler);
data2 = {
  get test() {
    return this._test;
  },
  set test(value) {
    return this._test = value;
  }
};
const EVENTS = new WeakMap();
function pub(object, event, data) {
  if (!EVENTS.has(object)) { return; }
  const callbacks = EVENTS.get(object)[event];
  if (callbacks) {
    for (const callback of callbacks) {
      callback(data);
    }
  }
}
function sub(object, event, callback) {
  let dict;
  if (!EVENTS.has(object)) {
    EVENTS.set(object, dict={});
  } else {
    dict = EVENTS.get(object);
  }
  let evList;
  if (event in dict) {
    (evList = dict[event]).push(callback);
  } else {
    evList = dict[event] = [callback];
  }
  return function unsub() {
    evList.splice(evList.indexOf(callback), 1);
  }
}
data3 = {};
sub(data3, 'set-test', v => data3.test = v);
sub(data3, 'get-test', () => pub(data3, 'getting-test', data3.test));
sub(data3, 'getting-test', v => a += v);
var a = 0;
data4 = {};
data5 = {};
sub(data5, 'set-test', v => { data5.test = v; pub(data5, 'getting-test', data3.test); });
sub(data5, 'getting-test', v => a += v);

Tests:

getter / setter
data2.test = Math.random(); a += data2.test;
proxy
proxy.test = Math.random(); a += proxy.test;
events
pub(data3, 'set-test', Math.random()); pub(data3, 'get-test');
plain object
data4.test = Math.random(); a += data4.test;
events (kinda cheating)
// note that is almost certainly not accurate since it probably ends after this function is called, not when getting-test triggers pub(data3, 'set-test', Math.random());