Benchmark: Cached Getter (class) vs Getter vs Proxy

Script Preparation code:

plainObj = {test: 1};
handler = {
  get: (target, prop) => (target[prop]),
};
proxy = new  Proxy(plainObj, handler);


class ClassGetterSetter {
  constructor() {
    this._test = 1;
  }
  get test() {
    return this._test;
  }
}

class CachedGetterSetter {
  constructor() {
    this._test = 1;
  }
  get test() {
    var val = this._test;
    //this.test = val;
    
    Object.defineProperty(this, 'test', {
  		value: val,
    });
    
    return val;
  }
}


objWithGetter = {
  _test: 1,
  get test() {
    return this._test;
  },
};

objWithClass = new ClassGetterSetter();
objWithCachedClass = new CachedGetterSetter();


var a = 0;

objWithCachedClass.test;

Tests:

getter / setter
a += objWithGetter.test;
proxy
a += proxy.test;
plain object
a += plainObj.test;
class getter
a += objWithClass.test;
cached class getter
a += objWithCachedClass.test;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getter / setter
proxy
plain object
class getter
cached class getter

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The provided JSON defines a benchmark named "Cached Getter (class) vs Getter vs Proxy" that compares the performance of three different approaches:

1.  **Proxy**: Using JavaScript's built-in `Proxy` object to create a proxy object.
2.  **Plain Object**: Accessing an object directly using its property name.
3.  **Class Getter Setter**: Creating a class with getter and setter methods.

**Options Compared**

The benchmark tests the performance of each option by executing the following lines of code:

```javascript
a += objWithGetter.test;
```

```javascript
a += proxy.test;
```

```javascript
a += plainObj.test;
```

```javascript
a += objWithClass.test;
```

```javascript
a += objWithCachedClass.test;
```

**Pros and Cons**

*   **Proxy**: Pros: Provides a way to access an object's property without directly accessing the underlying object. Can be useful for security, debugging, or performance optimization purposes. Cons: May introduce additional overhead due to the creation of a proxy object.
*   **Plain Object**: Pros: Directly accesses the object's property without any intermediate step. Often used for simplicity and readability. Cons: Does not provide any benefits in terms of security or performance over directly accessing the property.
*   **Class Getter Setter**: Pros: Provides a way to encapsulate data access using getter and setter methods, which can be useful for encapsulation, security, and data validation purposes. Cons: May introduce additional overhead due to the creation of an instance.

**Library and Purpose**

The `Proxy` object is a built-in JavaScript object that allows creating proxy objects, which are essentially wrapper objects around another object.

In this benchmark, the `Proxy` object is created with a handler object that defines the behavior for accessing properties on the underlying object. In this case, the handler sets the value of the property to be accessed to be the same as the original value.

**Special JS Feature**

This benchmark uses JavaScript's feature called " getter and setter methods" which allow encapsulation and data validation in classes. The `Class Getter Setter` option demonstrates how to use these features to access an object's data through controlled interfaces.

However, it seems like this benchmark is using the getter method without assigning its return value back to itself or any other variable, so that `this.test = val;` line is commented out which might reduce some of the overhead that would be caused by such assignments.

Latest run results:

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

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

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getter / setter	3155475.2 Ops/sec
proxy	2908095.5 Ops/sec
plain object	3285975.8 Ops/sec
class getter	3385412.2 Ops/sec
cached class getter	3590134.2 Ops/sec

Related benchmarks:

Cached Getter (class) vs Getter vs Proxy (version: 0)

Comparing performance of: getter / setter vs proxy vs plain object vs class getter vs cached class getter

Created: 2 years ago by: Registered User

Jump to the latest result

getter / setter

proxy

plain object

class getter

cached class getter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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