Run results for: Data Properties vs. Accessor Properties vs. Getter / Setter Methods vs Proxy

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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0

Browser: Chrome 144

Operating system: Windows

Device Platform: Desktop

Date tested: 6 months ago

Read from data property

166.2M/s

Read from accessor method

163.4M/s

Write to data property

155.3M/s

Read from object literal property on prototype

152.7M/s

Write to mutator method

142.8M/s

Write to object literal property on prototype

83.4M/s

Read from object literal property

76.1M/s

R p0

50.7M/s

r p1

44.9M/s

w p1

39.6M/s

r p2

33.4M/s

W p0

33.3M/s

Write to object literal property

18.6M/s

w p2

5.7M/s

View exact numbers

Test name	Executions per second
✓ Read from data property	166,165,792 Ops/sec
Read from accessor method	163,396,256 Ops/sec
Write to data property	155,263,136 Ops/sec
Read from object literal property on prototype	152,674,624 Ops/sec
Write to mutator method	142,794,560 Ops/sec
Write to object literal property on prototype	83,404,840 Ops/sec
Read from object literal property	76,079,008 Ops/sec
R p0	50,681,036 Ops/sec
r p1	44,856,460 Ops/sec
w p1	39,637,960 Ops/sec
r p2	33,351,264 Ops/sec
W p0	33,292,624 Ops/sec
Write to object literal property	18,611,162 Ops/sec
w p2	5,733,512 Ops/sec

Script Preparation code:

var property = 0;
var data = {
  property: property
};

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;
  }
};
    
var prototypeAccessor = new Class();

var p0 = new Proxy({}, {
   get(target, prop, receiver) {
    return property;
  },
  set(target, prop, value) {
    property = value;
    return true;
  },
});
var p1 = new Proxy({ property: 0 }, {
   get(target, prop, receiver) {
    return target[prop]
  },
  set(target, prop, value) {
    target[prop] = value;
    return true;
  },
});
var p2 = new Proxy({ property: 0 }, {
   get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    return Reflect.set(target, prop, value, receiver);
  },
});

Tests:

Read from data property
var value = data.property;
Write to data property
data.property = property+1;
Read from accessor method
var value = method.getProperty();
Write to mutator method
method.setProperty(property+1);
Read from object literal property
var value = objectLiteralAccessor.property;
Write to object literal property
objectLiteralAccessor.property = property+1;
Read from object literal property on prototype
var value = prototypeAccessor.property;
Write to object literal property on prototype
prototypeAccessor.property = property+1;
R p0
var value = p0.property;
W p0
p0.property = property+1;
r p1
var value = p1.property;
w p1
p1.property = property+1;
r p2
var value = p2.property;
w p2
p2.property = property+1;