object = { value: 'data' };
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
get(target, prop, receiver) {
return null
}
})
object.value;
proxy.value
proxyWithHandler.value
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Object access | |
Proxy access | |
Proxy with get handler access |
Test name | Executions per second |
---|---|
Object access | 13032276.0 Ops/sec |
Proxy access | 11290676.0 Ops/sec |
Proxy with get handler access | 9193315.0 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
What is being tested?
The provided benchmark measures the performance difference between accessing an object directly (object.value
) versus using a proxy object (proxy.value
) and another proxy object with a custom get handler (proxyWithHandler.value
). The tests aim to understand which approach has the lowest overhead in terms of CPU cycles.
Options compared:
object.value
directly.proxy.value
, where proxy
is a proxy object created using new Proxy(object, {})
.proxyWithHandler.value
, where proxyWithHandler
is another proxy object created with a custom get handler.Pros and Cons of each approach:
Library usage:
The benchmark uses the built-in Proxy
constructor and its methods (new Proxy()
, get()
). The Proxy
object is used to create a layer of indirection between the original object (object
) and the access point. This allows for custom behavior, such as implementing the get handler, which is used in this benchmark.
Special JavaScript feature or syntax:
There are no special features or syntaxes being tested here; it's a straightforward comparison of accessing an object directly versus using proxy objects with different configurations.
Other alternatives:
If you wanted to explore alternative approaches, you could consider:
set()
or deleteProp()
, to manipulate the proxy object.Keep in mind that this is just a starting point, and you can always experiment with variations of these approaches to find the most suitable solution for your specific use case.