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: one year 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

baseline property access

14.7M/s

function access

13.2M/s

proxy access

13.0M/s

View exact numbers

Test name	Executions per second
✓ baseline property access	14,681,554 Ops/sec
function access	13,196,346 Ops/sec
proxy access	13,019,390 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year 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.

proxy access vs function access (version: 1)

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

Created: one year ago by: Registered User

Go to the latest result

baseline property access

function access

proxy access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

proxy access vs function access (version: 1)

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

Created: one year ago by: Registered User

Go to the latest result

baseline property access

function access

proxy access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

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