Run results for: Proxy size

Run details:

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

Browser: Chrome 103

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Large Proxy - literal	261729.0 Ops/sec
Small Proxy - literal	279745.2 Ops/sec
Large Proxy - class	105536.9 Ops/sec
Small Proxy - class	190731.4 Ops/sec
Large GetterSetter - literal	93409.1 Ops/sec
Small GetterSetter - literal	205128.6 Ops/sec
Large GetterSetter - class	71912.8 Ops/sec
Small GetterSetter - class	151303.3 Ops/sec
control case	302593.0 Ops/sec

Script Preparation code:

function prep(){
 class BigFoo {
       constructor() {
           this.b = 2;
           this.c = 2;
           this.d = 2;
           this.e = 2;
           this.f = 2;
           this.g = 2;
           this.h = 2;
       }
       j() {}
       k() {}
       l() {}
       m() {}
       n() {}
       o() {}
       p() {}
   }

   class LilFoo {
       constructor() {
           this.a = 1;
       }
       i() {}
   }

   const handlersP = {
       get: (target, key) => target[key],
       set: (target, key, val) => {
           target[key] = val;
       },
   };

   const handlersD = {
       get() {
           return bValue;
       },
       set(newValue) {
           bValue = newValue;
       },
   };
return {BigFoo, LilFoo, handlersP, handlersD}
}


   function _proxy(target, handlers) {
       for (const key in target) {
           Object.defineProperty(target, key, handlers);
       }
   }

Tests:

Large Proxy - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const proxy = new Proxy(bigFoo, handlersP);
Small Proxy - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = { a: 1, i: () => {}, }; const proxy = new Proxy(lilFoo, handlersP)
Large Proxy - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = new BigFoo(); const proxy = new Proxy(bigFoo, handlersP)
Small Proxy - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = new LilFoo(); const proxy = new Proxy(lilFoo, handlersP)
Large GetterSetter - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const proxy = _proxy(bigFoo, handlersD);
Small GetterSetter - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = { a: 1, i: () => {}, }; const proxy = _proxy(lilFoo, handlersD);
Large GetterSetter - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = new BigFoo(); const proxy = _proxy(bigFoo, handlersD);
Small GetterSetter - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = new LilFoo(); const proxy = _proxy(lilFoo, handlersD);
control case
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const proxy = bigFoo;

Run results for: Proxy size

Large Proxy - literal

Small Proxy - literal

Large Proxy - class

Small Proxy - class

Large GetterSetter - literal

Small GetterSetter - literal

Large GetterSetter - class

Small GetterSetter - class

control case