Benchmark: proxy access vs function vs getter

HTML Preparation code:

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

Script Preparation code:

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

Tests:

baseline property access
const {obj}=useTest() const a =obj.a
obj with getter
const {objWGetter}=useTest() const a =objWGetter.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
obj with getter
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
baseline property access	7018421.0 Ops/sec
obj with getter	7334697.5 Ops/sec
function access	7098264.0 Ops/sec
proxy access	6909715.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares the performance of different methods of accessing a property from an object in JavaScript. Specifically, it examines:

1. **Baseline Property Access**: Directly accessing the property `a` from the original object, `obj`.
   - **Pros**: Fastest and most straightforward method. Direct memory access without any overhead.
   - **Cons**: None in terms of access speed but lacks abstraction.
  
2. **Object with Getter**: Accessing the property `a` from an object that has a getter.
   - **Pros**: Provides encapsulation. Can include logic to manipulate data before returning it, allowing for more controlled access.
   - **Cons**: Slightly slower than direct property access due to the additional function call overhead of the getter.

3. **Function Access**: Accessing the property through a function call (`getA`).
   - **Pros**: Can include more complex logic and calculations. Useful for validation or modifying values before returning them.
   - **Cons**: Introduces additional overhead due to the function call, making it generally slower than direct access or even using getters.

4. **Proxy Access**: Accessing the property `a` through a JavaScript `Proxy` object.
   - **Pros**: Proxies allow for interception and redefining fundamental operations for objects (like property access). This can be beneficial for tracking property access or implementing custom behavior.
   - **Cons**: This method is also slower than direct property access because of the additional overhead of defining a proxy handler that intercepts property access.

### Summary of Performance Observations
From the benchmark results on a specific mobile device (iPhone), we see the following execution rates in terms of accesses per second:
- Baseline Property Access: **8,114,421.5**
- Object with Getter: **7,727,536.5**
- Function Access: **7,540,073.0**
- Proxy Access: **7,246,799.5**

### Comparison of Approaches
- The direct property access (baseline) is the fastest, making it ideal when performance is crucial and no additional functionality is required.
- Using getters provides a balance between flexibility and performance, although it incurs some overhead.
- Function access is useful when additional logic is needed, but should not be used when performance is the primary concern due to its slower execution.
- Proxy access offers powerful capabilities in terms of intercepting operations but at the cost of performance. It should be used when you need to implement custom behaviors and logic around property accesses and modifications.

### Alternatives
Beyond the methods tested, alternatives include:
- **Using ES6 classes**: Classes can encapsulate data and behavior neatly, allowing for controlled access through methods without losing performance too drastically, though it wouldn’t significantly alter the outcome of performance when assessed against these methods.
- **Data structures like Maps**: Maps would be fitting for storing key-value pairs and can provide a more structured way than plain objects, but they typically do not offer performance improvements in property access.
- **Functional Programming**: This paradigm often leads to different approaches to handling data (like immutability) that can affect access patterns but typically doesn't directly influence raw access speeds.

Overall, the choice of access method should be guided by the specific needs of the application, including considerations of performance, encapsulation, and functional requirements.

Related benchmarks:

proxy access vs function vs getter (version: 1)

Comparing performance of: baseline property access vs obj with getter vs function access vs proxy access

Created: one year ago by: Registered User

Jump to the latest result

baseline property access

obj with getter

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