Benchmark: Direct access vs Class accessors vs Object.defineProperty

Direct access vs Class accessors vs Object.defineProperty (version: 1)

Comparing performance of: Creation of basic object vs Creation of setter object vs Creation of accessor object vs Creation of basic class vs Creation of setter class vs Creation of accessor class vs Increment basic object value vs Increment setter object value vs Increment accessor object value vs Increment basic class value vs Increment setter class value vs Increment accessor class value

Created: one year ago by: Guest

Jump to the latest result

Script Preparation code:


function createBasicObject() {
  return { value: 0, dirty: false }
}

function createSetterObject() {
  const object = {
    value: 0,
    dirty: false,

    setValue(value) {
      if (value !== object.value) {
        object.value = value;
        object.dirty = true;
      }
    }
  }
  return object
}

function createAccessorObject() {
  let _value = 0;

  const object = {
    value: _value,
    dirty: false,
  };

  Object.defineProperty(object, "value", {
    get() {
      return _value;
    },
    set(value) {
      if (value !== _value) {
        _value = value;
        this.dirty = true;
      }
    },
  });

  return object;
}

class BasicClass {
  value = 0;
  dirty = false;
}

class SetterClass {
  value = 0;
  dirty = false;

  setValue(value) {
    if (value !== this.value) {
      this.value = value;
      this.dirty = true;
    }
  }
}

class AccessorClass {
  dirty = false;

  _value = 0;

  get value() {
    return this._value;
  }

  set value(value) {
    if (value !== this._value) {
      this._value = value;
      this.dirty = true;
    }
  }
}

const COUNT = 100

const basicObjects = new Array(COUNT)
for (let i=0; i<100; i++) {
  basicObjects[i] = createBasicObject()
}

const setterObjects = new Array(COUNT)
for (let i=0; i<100; i++) {
  setterObjects[i] = createSetterObject()
}

const accessorObjects = new Array(COUNT)
for (let i=0; i<100; i++) {
  accessorObjects[i] = createAccessorObject()
}

const basicClasses = new Array(COUNT)
for (let i=0; i<100; i++) {
  basicClasses[i] = new BasicClass()
}

const setterClasses = new Array(COUNT)
for (let i=0; i<100; i++) {
  setterClasses[i] = new SetterClass()
}

const accessorClasses = new Array(COUNT)
for (let i=0; i<100; i++) {
  accessorClasses[i] = new AccessorClass()
}

Tests:

Creation of basic object
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = createBasicObject() }
Creation of setter object
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = createSetterObject() }
Creation of accessor object
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = createAccessorObject() }
Creation of basic class
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = new BasicClass() }
Creation of setter class
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = new SetterClass() }
Creation of accessor class
const results = new Array(COUNT) for (let i=0; i<100; i++) { results[i] = new AccessorClass() }
Increment basic object value
for (let i=0; i<100; i++) { obj = basicObjects[i] obj.value++ obj.dirty = true }
Increment setter object value
for (let i=0; i<100; i++) { obj = setterObjects[i] obj.setValue(obj.value + 1) }
Increment accessor object value
for (let i=0; i<100; i++) { accessorObjects[i].value++ }
Increment basic class value
for (let i=0; i<100; i++) { obj = basicClasses[i] obj.value++ obj.dirty = true }
Increment setter class value
for (let i=0; i<100; i++) { obj = setterClasses[i] obj.setValue(obj.value + 1) }
Increment accessor class value
for (let i=0; i<100; i++) { accessorClasses[i].value++ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Creation of basic object
Creation of setter object
Creation of accessor object
Creation of basic class
Creation of setter class
Creation of accessor class
Increment basic object value
Increment setter object value
Increment accessor object value
Increment basic class value
Increment setter class value
Increment accessor class value

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/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Creation of basic object	5553372.5 Ops/sec
Creation of setter object	2430836.8 Ops/sec
Creation of accessor object	65086.1 Ops/sec
Creation of basic class	5521134.0 Ops/sec
Creation of setter class	5542558.5 Ops/sec
Creation of accessor class	5505871.5 Ops/sec
Increment basic object value	142708.9 Ops/sec
Increment setter object value	140263.7 Ops/sec
Increment accessor object value	193267.8 Ops/sec
Increment basic class value	141701.2 Ops/sec
Increment setter class value	142035.9 Ops/sec
Increment accessor class value	5567861.5 Ops/sec

Related benchmarks: