Run results for: proxy vs object

Run details:

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

Browser: Chrome 116

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
proxy	1335673.6 Ops/sec
object	14488282.0 Ops/sec
proxy with cache	1337843.6 Ops/sec
object with lodash	2277619.2 Ops/sec

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

get = _.get
class MenuProxy {
    constructor(menu) {
        const proxies = new WeakMap();

        const getObjByRef = (ref) => {
            const pathToObject = ref.replace(/\//g, '.').replace('#', 'menu');
            return get({
                menu
            }, pathToObject);
        };

        const handler = {
            get(target, key) {
                if (target[key] && typeof target[key] === 'object') {
                    const obj = target[key]?.$ref ? getObjByRef(target[key]?.$ref) : target[key];
                    if (proxies.has(obj)) {
                        return proxies.get(obj);
                    }

                    const proxy = new Proxy(obj, handler);
                    proxies.set(obj, proxy);
                    return proxy;
                }

                return target[key];
            },
        };
        return new Proxy(menu, handler);
    }
}

menu = {
    $id: '#',
    items: [{
        "name": "Додстер"
    }],
    structure: [{
        items: [{
            menuItem: {
                "$ref": "#/items/0"
            }
        }]
    }]
};

mp = new MenuProxy(menu)

Tests:

proxy
mp.structure[0].items[0].menuItem
object
menu.structure[0].items[0].menuItem
proxy with cache
mp.structure[0].items[0].menuItem
object with lodash
const pathToObject = menu.structure[0].items[0].menuItem.$ref.replace(/\//g, '.').replace('#', 'menu'); get({ menu }, pathToObject);

Run results for: proxy vs object

proxy

object

proxy with cache

object with lodash