Benchmark: proxy access vs function access

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function useTest() {
    const obj = {
        a: 'something'
    }

    const proxy = new Proxy(obj, {
        get(target, key) {
            return target[key]
        }
    })

    function getA() {
        return obj.a
    }
  
    return {
        obj,
        proxy,
        getA
    }
}

Tests:

baseline property access
const {obj} = useTest() const a = obj.a
function access
const {getA} = useTest() const a =getA()
proxy access
const {proxy} = useTest() const a = proxy.a

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
baseline property access
function access
proxy access

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3.2

View result in a separate tab

Test name	Executions per second
baseline property access	14681554.0 Ops/sec
function access	13196346.0 Ops/sec
proxy access	13019390.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 days ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of three different approaches to accessing properties in a JavaScript object: direct property access, access through a function, and access via a Proxy. Each of these methods has its own characteristics, which are reflected in their performance metrics.

### Options Compared

1. **Baseline Property Access**: 
   ```javascript
   const {obj} = useTest();
   const a = obj.a;
   ```
   - **Description**: This method involves direct access to the property `a` of an object `obj`.
   - **Performance**: This approach serves as the baseline for the benchmark. It measures the fastest and most straightforward method for property access.
   - **Pros**:
     - Fast and efficient, being the simplest form of object property access.
     - Straightforward and easy to understand.
   - **Cons**: 
     - Does not provide any additional functionality like validation or interception.

2. **Function Access**: 
   ```javascript
   const {getA} = useTest();
   const a = getA();
   ```
   - **Description**: This method uses a function `getA` to return the value of property `a` from the object.
   - **Performance**: Generally slower than direct access due to the overhead of function invocation.
   - **Pros**:
     - Allows for encapsulation and potential for added functionality, such as validation or logging.
     - More flexible for changing the underlying implementation without changing how property access is done in the rest of the code.
   - **Cons**:
     - Added overhead from function calls can lead to performance degradation compared to direct access.

3. **Proxy Access**: 
   ```javascript
   const {proxy} = useTest();
   const a = proxy.a;
   ```
   - **Description**: This method uses a JavaScript Proxy to access the property `a`. A Proxy allows for customization of fundamental operations on an object, such as property lookups.
   - **Performance**: This approach demonstrates the overhead of using proxies, which is generally less efficient than direct access.
   - **Pros**:
     - Provides powerful capabilities for interception, such as validation, custom logging, and property access control.
     - Can dynamically modify behavior of the object during runtime.
   - **Cons**:
     - Increased complexity and performance overhead compared to direct property access and function calls.
     - Often slower than the other two methods due to the extra layer of abstraction.

### Benchmark Results Summary
The benchmark results indicate that direct property access is the fastest method (16,254,659 executions per second), followed by function access (14,327,521 executions per second), and finally proxy access (13,545,527 executions per second). This outcome aligns with expectations, as direct access has the least overhead, while the Proxy implementation introduces significant complexity and operational costs.

### Considerations and Alternatives
- **Alternatives**: While the benchmark compares these three approaches, alternatives for property access might include:
  - Using libraries or frameworks that automate state management (like Redux or MobX), which usually manage properties differently.
  - Object destructuring, a more modern JavaScript syntax for extracting properties, which can be compared in terms of readability and convenience.
  - Considering immutability libraries such as Immutable.js, which can change performance characteristics significantly.

Overall, the choice of property access method should weigh the need for performance against the need for flexibility, maintainability, and potential future enhancements.

Related benchmarks:

proxy access vs function access (version: 1)

Comparing performance of: baseline property access vs function access vs proxy access

Created: 9 days ago by: Registered User

Jump to the latest result

baseline property access

function access

proxy access

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 days ago):