Benchmark: proxy vs object - MeasureThat.net

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
proxy
object
proxy with cache
object with lodash

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON benchmark.

**Benchmark Definition**

The benchmark compares two approaches:

1. **Proxy**: This approach uses JavaScript's built-in `Proxy` object to create a proxy for the `menu` object. The proxy is created using a custom handler that checks if the accessed property is an object and, if so, returns a cached version of it.
2. **Object**: This approach accesses the `menuItem` property directly on the original `menu` object.

**Options Compared**

The two approaches are compared in terms of performance (measured by executions per second).

**Pros and Cons**

1. **Proxy**:
	* Pros:
		+ Can provide better protection against modifications to the original object.
		+ Allows for custom behavior on property access (e.g., caching).
	* Cons:
		+ May introduce overhead due to the creation of a proxy object.
		+ Can lead to more complex code and harder-to-debug scenarios.
2. **Object**:
	* Pros:
		+ No overhead or complexity introduced by creating a proxy object.
		+ Straightforward and easy to understand.
	* Cons:
		+ Lacks protection against modifications to the original object.
		+ Does not allow for custom behavior on property access.

**Other Considerations**

In this benchmark, the use of a `WeakMap` to cache accessed objects in the proxy approach can help improve performance by avoiding repeated lookups. However, it's essential to note that this caching mechanism may not always be beneficial, especially if the object graph is large or complex.

The use of Lodash's `get` function in one of the benchmark test cases introduces another variable to consider. While Lodash provides a convenient way to access nested properties, it also adds overhead and complexity compared to direct property access on the original object.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks like array manipulation, string processing, and more. In this benchmark, Lodash's `get` function is used to access nested properties in a way that mimics the proxy approach.

However, as mentioned earlier, using Lodash introduces additional overhead and complexity compared to direct property access on the original object.

**Special JS Feature/Syntax**

None of the provided code snippets use any special JavaScript features or syntax, such as async/await, arrow functions, or generators. The code is written in a straightforward style that's easy to understand for most developers.

Now, let's take a look at some alternative approaches and their pros and cons:

**Alternative Approaches**

1. **Using a library like ProxyKit**: ProxyKit is a library that provides a more convenient API for creating proxies than the built-in `Proxy` object.
2. **Using a decorator**: Decorators are a feature in JavaScript that allow you to modify or extend the behavior of a function or class without modifying its source code. A decorator could be used to create a proxy-like behavior for the `menu` object.
3. **Using a different caching strategy**: Instead of using a `WeakMap` to cache accessed objects, another approach could be to use a more aggressive caching strategy, such as storing the entire object graph in memory and reusing it when needed.

Each alternative approach has its own pros and cons, and the choice of which one to use depends on the specific requirements and constraints of the project.

Related benchmarks:

proxy vs object (version: 2)

Comparing performance of: proxy vs object vs proxy with cache vs object with lodash

Created: 2 years ago by: Registered User

Jump to the latest result

proxy

object

proxy with cache

object with lodash

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):