Benchmark: Object.setPrototypeOf vs Proxy - property access (with baseline)

HTML Preparation code:

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

Script Preparation code:

 class Car {
     constructor(make, model, year, mileage = 0, fuelLevel = 100) {
         this.make = make;
         this.model = model;
         this.year = year;
         this.mileage = mileage;
         this.fuelLevel = fuelLevel;
     }

     start() {
         console.log(`${this.make} ${this.model} is starting...`);
     }

     stop() {
         console.log(`${this.make} ${this.model} is stopping...`);
     }

     drive(distance) {
         if (this.fuelLevel > 0) {
             this.mileage += distance;
             this.fuelLevel -= distance * 0.05; // Assuming 1 unit of fuel per 20 miles
             console.log(`You drove ${distance} miles. Mileage is now ${this.mileage} miles.`);
         } else {
             console.log('Not enough fuel to drive.');
         }
     }

     refuel(amount) {
         this.fuelLevel += amount;
         console.log(`Refueled ${amount}%. Fuel level is now ${this.fuelLevel}%.`);
     }

     getCarInfo() {
         return `${this.year} ${this.make} ${this.model}, Mileage: ${this.mileage} miles, Fuel Level: ${this.fuelLevel}%`;
     }
 }

 function createCar() {

     return new Car('Toyota', 'Corolla', 2021, 5000, 100);
 }

 function createProperties() {
     return {
         make: 'Toyota',
         model: 'Corolla',
         year: 2021,
         mileage: 5000,
         fuelLevel: 100
     }
 }

 function createProto() {
     return {
         start: function() {
             console.log(`${this.make} ${this.model} is starting...`);
         },

         stop: function() {
             console.log(`${this.make} ${this.model} is stopping...`);
         },

         drive: function(distance) {
             if (this.fuelLevel > 0) {
                 this.mileage += distance;
                 this.fuelLevel -= distance * 0.05; // Assuming 1 unit of fuel per 20 miles
                 console.log(`You drove ${distance} miles. Mileage is now ${this.mileage} miles.`);
             } else {
                 console.log('Not enough fuel to drive.');
             }
         },

         refuel: function(amount) {
             this.fuelLevel += amount;
             console.log(`Refueled ${amount}%. Fuel level is now ${this.fuelLevel}%.`);
         },

         getCarInfo: function() {
             return `${this.year} ${this.make} ${this.model}, Mileage: ${this.mileage} miles, Fuel Level: ${this.fuelLevel}%`;
         }
     }
 }

 function extendTarget(target, proto) {
     Object.setPrototypeOf(proto, Object.getPrototypeOf(target))
     Object.setPrototypeOf(target, proto)
     return target
 }

 function createProxy(target) {
     return new Proxy(target, {
         get(target, key, receiver) {
             if (key in target)
                 return Reflect.get(target, key, receiver)
         },
         set(target, key, value, receiver) {
             target[key] = value;
             return true;
         }
     })
 }

 const proxy = createProxy(createCar())

 function getProxy() {
     return proxy
 }

 const extended = extendTarget(createProperties(), createProto())

 function getExtendedObject() {
     return extended
 }

 const obj = createCar()

 function getCar() {
     return obj
 }

Tests:

Object.setPrototypeOf
const object = getExtendedObject() object.drive object.start object.stop object.refuel object.getCarInfo object.make object.model object.year object.mileage object.fuelLevel
Proxy
const object = getProxy() object.drive object.start object.stop object.refuel object.getCarInfo object.make object.model object.year object.mileage object.fuelLevel
baseline class
const object = getCar() object.drive object.start object.stop object.refuel object.getCarInfo object.make object.model object.year object.mileage object.fuelLevel

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.setPrototypeOf
Proxy
baseline class

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
Object.setPrototypeOf	1726555904.0 Ops/sec
Proxy	4234527.0 Ops/sec
baseline class	1661324928.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark tests the performance of different methods for accessing properties and methods of objects in JavaScript, specifically comparing the use of `Object.setPrototypeOf`, `Proxy`, and a baseline approach that uses a straightforward JavaScript class instantiation.

### Options Compared

1. **Object.setPrototypeOf**:
   - **Test Case**: `object.drive`, `object.start`, `object.stop`, `object.refuel`, `object.getCarInfo`, along with accessing the properties: `object.make`, `object.model`, `object.year`, `object.mileage`, `object.fuelLevel`.
   - **Description**: This method modifies the prototype of an existing object. It allows a new prototype to be set for an object. This means you can change the prototype chain dynamically, but it can lead to performance issues since it makes it harder for JavaScript engines to optimize property access patterns.
   - **Pros**:
     - Flexibility in changing the object’s prototype on-the-fly.
     - Enables prototypical inheritance.
   - **Cons**:
     - Performance overhead due to optimization barriers.
     - Changing prototypes at runtime can lead to complex and difficult-to-maintain code.
    
2. **Proxy**:
   - **Test Case**: Similar method calls and property accesses are benchmarked as the previous tests.
   - **Description**: The `Proxy` object allows you to define custom behavior for fundamental operations on objects (e.g., property lookup, assignment, enumeration, function invocation, etc.). In the test, it encapsulates a target object and intercepts property access.
   - **Pros**:
     - Enhanced control over property access and manipulation, leading to encapsulation and abstraction.
     - Allows for additional behavior when properties are accessed or set (e.g., logging, validation).
   - **Cons**:
     - Adds overhead due to interception for every access or set operation.
     - Complexity may increase as you need to define handlers for different operations.

3. **Baseline Class**:
   - **Test Case**: Instantiating a `Car` object and accessing its properties and methods.
   - **Description**: This method uses a traditional object-oriented approach by creating an instance of a class—`Car`—which has a straightforward prototype and method access.
   - **Pros**:
     - Simple and clear structure, making it easy to understand and maintain.
     - Optimized by JavaScript engines for performance since it does not involve any prototype manipulation or interception overhead.
   - **Cons**:
     - Less flexibility in behavior compared to proxies or dynamic prototype changes.
     - If you want to extend behavior or properties, you would need to alter the class structure directly.

### Benchmark Results
- **Results**:
  - `Object.setPrototypeOf`: **58,674,176 executions per second**
  - **Baseline Class**: **55,178,272 executions per second**
  - `Proxy`: **1,063,693.25 executions per second**

### Conclusion
The results indicate that `Object.setPrototypeOf` performed the best, closely followed by the baseline class instantiation, while the `Proxy` performance was significantly slower. This is likely due to the overhead involved in the intercepting mechanism of `Proxy`, which leads to slower property access compared to direct prototype access or class instance method calls.

### Alternatives
Other alternatives for property access in JavaScript could include:

- **Object.create()**: This method creates a new object with a specified prototype object and properties. It can be a lightweight alternative to `Object.setPrototypeOf` for setting up prototypes.
  
- **Using `class` with `extends`**: When needing inheritance, using ES6 classes with the `extends` keyword maintains performance benefits and clear syntax without the risks of dynamic prototype manipulation.

- **Factory Functions**: This pattern allows you to create object instances without using the class syntax, thereby keeping memory footprints lower and avoiding prototype chains if not necessary.

Choosing the right method for your application typically comes down to a trade-off between performance, maintainability, and flexibility.

Related benchmarks:

Object.setPrototypeOf vs Proxy - property access (with baseline) (version: 1)

Comparing performance of: Object.setPrototypeOf vs Proxy vs baseline class

Created: 2 months ago by: Registered User

Jump to the latest result

Object.setPrototypeOf

Proxy

baseline class

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):