Benchmark: Data Properties vs. Accessor Properties vs. Getter / Setter Methods 2

Data Properties vs. Accessor Properties vs. Getter / Setter Methods 2 (version: 0)

The purpose of this benchmark is to determine the performance differences between data properties, accessor properties and getters / setter functions.

Comparing performance of: Read from data property vs Write to data property vs Read from accessor method vs Write to mutator method vs Read from object literal property vs Write to object literal property vs Read from object literal property on prototype vs Write to object literal property on prototype vs Read with prototype method vs Write with prototype method

Created: 4 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<b>Comparing performance of:</b> Read from data property vs Write to data property vs Read from accessor method vs Write to mutator method vs Read from object literal property vs Write to object literal property vs Read from object literal property on prototype vs Write to object literal property on prototype

Script Preparation code:

var data = {
  property: property
};

var property = undefined;

var method = {
  getProperty: function() {
    return property;
  },

  setProperty: function(value) {
    property = value;
  }
};

var objectLiteralAccessor = {
  get property() {
    return property;
  },
  set property(value) {
    property = value;
  }
};

function Class() {
}

Class.prototype = {
  get property() {
    return property;
  },
  set property(value) {
    property = value;
  },
  getProperty() {
    return property;
  },
  setProperty(value) {
    property = value;
  }
};
    
var prototypeAccessor = new Class();

Tests:

Read from data property
var value = data.property;
Write to data property
data.property = true;
Read from accessor method
var value = method.getProperty();
Write to mutator method
method.setProperty(true);
Read from object literal property
var value = objectLiteralAccessor.property;
Write to object literal property
objectLiteralAccessor.property = true;
Read from object literal property on prototype
var value = prototypeAccessor.property;
Write to object literal property on prototype
prototypeAccessor.property = true;
Read with prototype method
var value = prototypeAccessor.getProperty();
Write with prototype method
prototypeAccessor.setProperty(true);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Read from data property
Write to data property
Read from accessor method
Write to mutator method
Read from object literal property
Write to object literal property
Read from object literal property on prototype
Write to object literal property on prototype
Read with prototype method
Write with prototype method

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 16 minutes ago)

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

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Test name	Executions per second
Read from data property	2388566528.0 Ops/sec
Write to data property	1466171776.0 Ops/sec
Read from accessor method	649753152.0 Ops/sec
Write to mutator method	1341940864.0 Ops/sec
Read from object literal property	649740544.0 Ops/sec
Write to object literal property	1275260160.0 Ops/sec
Read from object literal property on prototype	677672448.0 Ops/sec
Write to object literal property on prototype	1364491520.0 Ops/sec
Read with prototype method	848672320.0 Ops/sec
Write with prototype method	1359838464.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark measures the performance differences between three approaches to accessing and modifying data in JavaScript:

1. **Data Properties**: Using dot notation (e.g., `data.property`) to access and modify properties directly on an object.
2. **Accessor Properties**: Defining getter and setter functions as properties of an object (e.g., `objectLiteralAccessor.property`).
3. **Getter/Setter Methods**: Defining separate methods for accessing and modifying data (e.g., `method.getProperty()`).

**Options Compared**

The benchmark compares the performance of each approach:

* Reading from and writing to data properties (`data.property`)
* Using accessor properties (`objectLiteralAccessor.property`, `accessorProperty`)
* Accessing and modifying data using getter and setter methods (`method.getProperty()`, `method.set()`) on a prototype object

**Performance Comparison**

The benchmark results show the execution speed of each approach, measured in executions per second (FPS). The fastest approach is generally used as the default or recommended method.

**Key Observations**

1. **Data Properties**: Accessing and modifying data properties is relatively fast, with an average FPS of around 400-500.
2. **Accessor Properties**: Using accessor properties is slightly slower than data properties, with an average FPS of around 300-350.
3. **Getter/Setter Methods**: Accessing and modifying data using getter and setter methods on a prototype object is the slowest approach, with an average FPS of around 100-200.

**Reasons for Performance Differences**

The performance differences between these approaches can be attributed to various factors:

* Data properties: Direct access to object properties is fast because it involves a simple property lookup.
* Accessor properties: Defining getter and setter functions as properties introduces additional overhead due to function calls and property checks.
* Getter/Setter Methods: Separate methods for accessing and modifying data on a prototype object incur additional overhead from method calls, parameter passing, and potential cache misses.

**Best Practices**

Based on these results, the recommended approach is to use **data properties** when possible, as they offer the best balance between readability and performance. However, if using accessor properties or getter/setter methods is necessary for specific requirements (e.g., encapsulation, validation), it's essential to consider the potential performance trade-offs and optimize accordingly.

Please note that these observations and recommendations are based on a specific JavaScript engine and environment. Results may vary depending on other factors, such as version, optimization levels, or specific use cases.

Related benchmarks:

Data Properties vs. Accessor Properties vs. Getter / Setter Methods 2 (version: 0)

The purpose of this benchmark is to determine the performance differences between data properties, accessor properties and getters / setter functions.

Created: 4 years ago by: Guest

Jump to the latest result

Read from data property

Write to data property

Read from accessor method

Write to mutator method

Read from object literal property

Write to object literal property

Read from object literal property on prototype

Write to object literal property on prototype

Read with prototype method

Write with prototype method

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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