Benchmark: Proxy target[key] vs Reflect.get vs get function

Script Preparation code:

const obj = {
    a: 'a',
    b: 'b',
    c: 'c'
}

const proxyReflect = new Proxy(obj, {
    get(target, key, receiver) {
        return Reflect.get(target, key, receiver)
    }
})

const proxy = new Proxy(obj, {
    get(target, key, receiver) {
        return target[key]
    }
})

function getAFromProxy() {
    return proxy.a;
}

function getA() {
    return obj.a;
}

function getAFromFunction() {
    return getA()
}

function getAFromProxyReflect() {
    return proxyReflect.a;
}

const outerProxyGetFunction = new Proxy({}, {
    get(target, key, receiver) {
        return getAFromFunction()
    }
})

const outerProxyProxy = new Proxy({}, {
    get() {
        return getAFromProxy()
    }
})

const outerProxyProxyReflect = new Proxy({}, {
    get() {
        return getAFromProxyReflect()
    }
})

function getOuterProxyGetFunction(){
 return outerProxyGetFunction 
}

function getOuterProxyProxyAccess(){
 return outerProxyProxy 
}

function getOuterProxyReflectAccess(){
 return outerProxyProxyReflect 
}

Tests:

Get Function
getAFromFunction()
proxy target[key]
getAFromProxy()
proxy Reflect.get
getAFromProxyReflect()
get function wrapped in proxy
getOuterProxyGetFunction()
proxy wrapped in proxy
getOuterProxyProxyAccess().a
proxy Reflect wrapped in proxy
getOuterProxyReflectAccess()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Get Function
proxy target[key]
proxy Reflect.get
get function wrapped in proxy
proxy wrapped in proxy
proxy Reflect wrapped in proxy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Get Function	2827007.5 Ops/sec
proxy target[key]	8516738.0 Ops/sec
proxy Reflect.get	3260483.5 Ops/sec
get function wrapped in proxy	12656738.0 Ops/sec
proxy wrapped in proxy	4294401.5 Ops/sec
proxy Reflect wrapped in proxy	12784567.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmarking test case, where users can compare the performance of different approaches to accessing a property in an object.

**Options being compared:**

1. `proxy target[key]`: This approach uses the built-in bracket notation (`[]`) to access the property.
2. `Reflect.get`: This approach uses the `Reflect` API to dynamically get the property value.
3. `get function`: This approach defines a separate function (`getAFromFunction`) to access the property, and then uses this function within another proxy.

**Pros and Cons:**

1. `proxy target[key]`:
	* Pros: Fastest and most straightforward approach.
	* Cons: May not work as expected in certain situations (e.g., when the object is not yet fully initialized).
2. `Reflect.get`:
	* Pros: More flexible and reliable than `proxy target[key]`, but may have a slight performance overhead due to the additional API call.
	* Cons: Requires the `Reflect` API, which might not be available in older browsers or environments.
3. `get function`:
	* Pros: Can provide more control over the access logic and caching behavior, but may introduce additional complexity and performance overhead.
	* Cons: May require more memory allocation and garbage collection due to the extra function creation.

**Library usage:**

None of the test cases explicitly use any external libraries.

**Special JS features or syntax:**

The `Reflect` API is used in the `Reflect.get` approach, which is a relatively modern feature introduced in ECMAScript 2015. It provides a way to dynamically access and manipulate property values without modifying the original object.

**Benchmark preparation code explanation:**

The provided script prepares three proxies:

1. `proxy`: A basic proxy that directly accesses the property using the bracket notation (`[]`).
2. `proxyReflect`: A proxy that uses `Reflect.get` to dynamically get the property value.
3. `outerProxyGetFunction`, `outerProxyProxy`, and `outerProxyReflect`: Additional proxies created by wrapping another proxy in a new one, which allows for further experimentation with different access approaches.

**Other alternatives:**

1. Using `Object.prototype.hasOwnProperty.call()` instead of bracket notation (`[]`) to access the property.
2. Implementing custom caching mechanisms or memoization techniques to improve performance.
3. Experimenting with different optimization techniques, such as using `Object.keys()` or `Object.values()` to iterate over the object's properties.

Keep in mind that the specific options and approaches being compared are intentionally designed to test various aspects of JavaScript's proxy mechanism and dynamic property access.

Related benchmarks:

Proxy target[key] vs Reflect.get vs get function (version: 0)

Comparing performance of: Get Function vs proxy target[key] vs proxy Reflect.get vs get function wrapped in proxy vs proxy wrapped in proxy vs proxy Reflect wrapped in proxy

Created: 2 months ago by: Registered User

Jump to the latest result

Get Function

proxy target[key]

proxy Reflect.get

get function wrapped in proxy

proxy wrapped in proxy

proxy Reflect wrapped in proxy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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