Benchmark: Proxy size - factory closure

Proxy size - factory closure (version: 0)

Comparing performance of: Large Proxy - literal vs Small Proxy - literal vs Large Proxy - class vs Small Proxy - class vs Large GetterSetter - literal vs Small GetterSetter - literal vs Large GetterSetter - class vs Small GetterSetter - class vs control case vs Large Proxy - factory vs Small Proxy - factory vs Large Proxy - factory closure methods vs Small Proxy - factory closure methods

Created: one year ago by: Registered User

Jump to the latest result

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

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 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0

Browser/OS: Firefox 103 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Large Proxy - literal	356320.9 Ops/sec
Small Proxy - literal	448304.0 Ops/sec
Large Proxy - class	125173.6 Ops/sec
Small Proxy - class	221662.8 Ops/sec
Large GetterSetter - literal	172099.8 Ops/sec
Small GetterSetter - literal	377827.9 Ops/sec
Large GetterSetter - class	97535.3 Ops/sec
Small GetterSetter - class	181015.8 Ops/sec
control case	1977389.0 Ops/sec
Large Proxy - factory	342971.9 Ops/sec
Small Proxy - factory	460451.4 Ops/sec
Large Proxy - factory closure methods	426778.3 Ops/sec
Small Proxy - factory closure methods	465395.1 Ops/sec

Proxy size - factory closure (version: 0)

Created: one year ago by: Registered User

Jump to the latest result

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A