Benchmark: Proxy size - factory

Proxy size - factory (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

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 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
    }
}


function _proxy(target, handlers) {
    for (const key in target) {
        Object.defineProperty(target, key, handlers);
    }
}

Tests:

Large Proxy - literal
const {BigFoo, LilFoo, bigBar, lilBar, 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,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,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,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, 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, 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,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, 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,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,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,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)

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

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 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/103.0.5060.63 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 103 on iOS 15.5

View result in a separate tab

Test name	Executions per second
Large Proxy - literal	1034546.0 Ops/sec
Small Proxy - literal	1091041.0 Ops/sec
Large Proxy - class	947253.9 Ops/sec
Small Proxy - class	970749.0 Ops/sec
Large GetterSetter - literal	184044.7 Ops/sec
Small GetterSetter - literal	461321.8 Ops/sec
Large GetterSetter - class	179533.3 Ops/sec
Small GetterSetter - class	690906.4 Ops/sec
control case	765737.3 Ops/sec
Large Proxy - factory	572967.1 Ops/sec
Small Proxy - factory	609830.8 Ops/sec

Proxy size - factory (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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A