Run results for: Proxies

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser: Chrome 121

Operating system: Linux

Device Platform: Desktop

Date tested: 26 days ago

Test name	Executions per second
Object GET	108506000.0 Ops/sec
Proxy GET	15049.6 Ops/sec
Simple Proxy GET	114619.0 Ops/sec
Simple Proxy SET	64185.5 Ops/sec
Complex Proxy SET	12660.9 Ops/sec

Script Preparation code:


function proxy(initialState) {
    if (!(typeof initialState === "object" && initialState !== null) && Array.isArray(initialState)) {
        throw new Error("proxy must be an object or an array");
    }

    const handler = {
        get(target, property) {
            return target[property];
        },

        set(target, property, value) {
            // Short-circuit if value changed is the same, prevents performance issues.
            if (target[property] === value) return true;

            // initialised ?? customLog(target, property, value);
            console.log(target, property, value);

            if (typeof value === "object") {
                value = proxy(value);
            }

           return target[property] = value;
             
        },
    };

    const proxiedObject = new Proxy({}, handler);

    /**
     * We need to loop the state manually inorder to convert the deeply nested
     * objects into proxies.
     *
     * Initially the proxied object is {} empty.
     * When we loop, we take every key from the initialState passed as parameter and  set it in the proxiedObject along with it's value. When this is done, the set() TRAP is called internally. During which we check if the initalState's value is an array or object. If so, we wrap it in another Proxy and set it as the value to the parent proxiedObject.
     */
    for (const key in initialState) {
        proxiedObject[key] = initialState[key];
    }

    initialised = true;

    return proxiedObject;
}

Tests:

Object GET
const testObj = {a:1,b:2,c:[1,2,3],d:{e:1000}}; testObj.a; testObj.d.e; testObj.c[2];
Proxy GET
const testObj = proxy({a:1,b:2,c:[1,2,3],d:{e:1000}}); testObj.a; testObj.d.e; testObj.c[2];
Simple Proxy GET
const testObj = proxy({a:1}) testObj.a;
Simple Proxy SET
const testObj = proxy({a:1}) testObj.a = 100; testObj.a
Complex Proxy SET
const testObj = proxy({a:1,b:2,c:[1,2,3],d:{e:1000}}); testObj.a; testObj.d.e = 'meow'; testObj.c[2] = 'apple';

proxies vs objects

Object GET

Proxy GET

Simple Proxy GET

Simple Proxy SET

Complex Proxy SET