Run results for: Proxy size - factory closure

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	206721.7 Ops/sec
Small Proxy - literal	217200.7 Ops/sec
Large Proxy - class	95012.1 Ops/sec
Small Proxy - class	159228.2 Ops/sec
Large GetterSetter - literal	88987.4 Ops/sec
Small GetterSetter - literal	165219.6 Ops/sec
Large GetterSetter - class	67844.1 Ops/sec
Small GetterSetter - class	126048.9 Ops/sec
control case	235285.7 Ops/sec
Large Proxy - factory	213883.5 Ops/sec
Small Proxy - factory	216295.7 Ops/sec
Large Proxy - factory closure methods	217633.2 Ops/sec
Small Proxy - factory closure methods	222357.2 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() {}
    }

    function bigBar() {
        return {
            b: 2,
            c: 2,
            d: 2,
            e: 2,
            f: 2,
            g: 2,
            h: 2,
            j: () => {},
            k: () => {},
            l: () => {},
            m: () => {},
            n: () => {},
            o: () => {},
            p: () => {},
        };
    }

    function lilCar() {
        return {
            a: 1,
            i,
        };
    }
  
  function i(){}
  
      function bigCar() {
        return {
            b: 2,
            c: 2,
            d: 2,
            e: 2,
            f: 2,
            g: 2,
            h: 2,
            j,
            k,
            l,
            m,
            n,
            o,
            p,
        };
    }
  
  function j(){}
  function k(){}
  function l(){}
  function m(){}
  function n(){}
  function o(){}
  function p(){}

    function lilBar() {
        return {
            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,
        bigBar,
        lilBar,
      bigCar,
      lilCar
    }
}


function _proxy(target, handlers) {
    for (const key in target) {
        Object.defineProperty(target, key, handlers);
    }
}

Tests:

Large Proxy - literal
const {BigFoo, LilFoo, bigBar, lilBar, bigCar, lilCar,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, bigBar, lilBar,bigCar, lilCar,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, bigBar, lilBar,bigCar, lilCar,handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = new BigFoo(); const proxy = new Proxy(bigFoo, handlersP)
Small Proxy - class
const {BigFoo, LilFoo, bigBar, lilBar,bigCar, lilCar,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,bigBar, lilBar, bigCar, lilCar,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,bigBar, lilBar, bigCar, lilCar,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, bigBar, lilBar,bigCar, lilCar,handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = new BigFoo(); const proxy = _proxy(bigFoo, handlersD);
Small GetterSetter - class
const {BigFoo, LilFoo,bigBar, lilBar, bigCar, lilCar,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, bigBar, lilBar,bigCar, lilCar,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;
Large Proxy - factory
const {BigFoo, LilFoo, bigBar, lilBar,bigCar, lilCar,handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = bigBar(); const proxy = new Proxy(bigFoo, handlersP);
Small Proxy - factory
const {BigFoo, LilFoo, bigBar, lilBar,bigCar, lilCar,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 = lilBar(); const proxy = new Proxy(lilFoo, handlersP)
Large Proxy - factory closure methods
const {BigFoo, LilFoo, bigBar, lilBar,bigCar, lilCar,handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = bigCar(); const proxy = new Proxy(bigFoo, handlersP);
Small Proxy - factory closure methods
const {BigFoo, LilFoo, bigBar, lilBar,bigCar, lilCar,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 = lilCar(); const proxy = new Proxy(lilFoo, handlersP)

Run results for: Proxy size - factory closure

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

Large Proxy - factory

Small Proxy - factory

Large Proxy - factory closure methods

Small Proxy - factory closure methods