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/17.6.1 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

proxy

124.3M/s

plain object

123.0M/s

getter / setter

122.5M/s

events (kinda cheating)

60.5M/s

events

27.6M/s

View exact numbers

Test name	Executions per second
✓ proxy	124,349,128 Ops/sec
plain object	122,991,104 Ops/sec
getter / setter	122,478,248 Ops/sec
events (kinda cheating)	60,517,268 Ops/sec
events	27,625,194 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());