Benchmark: bind props test - MeasureThat.net

Script Preparation code:


const readonly = (prop) => typeof prop === 'function'
  ? { configurable: false, enumerable: true, get: prop }
  : { configurable: false, enumerable: true, value: prop, writable: false };
const readonlyExpand = (props) => Object.entries(props).reduce((prev, [k, v]) => {
  prev[k] = readonly(v);
  return prev;
}, {});

const a100 = new Array(100).fill(null);

function test1() {
  return Object.defineProperties({}, readonlyExpand(a100.reduce((prev, _, i) => {
    prev[`key${i}`] = i;
    return prev;
  }, {})))
}

function test2() {
  return Object.defineProperties({}, readonlyExpand(a100.reduce((prev, _, i) => {
    prev[`key${i}`] = () => i;
    return prev;
  }, {})))
}

function test3() {
  return a100.reduce((prev, _, i) => {
    prev[`key${i}`] = i;
    return prev;
  }, {});
}

class Test4 {
  test() {
    a100.forEach((_, i) => {
      this[`key${i}`] = i;
    })
  }
}

function test4() {
  const t = new Test4();
  t.test();
  return t;
}

function test5() {
  const o = {};
  a100.forEach((_, i) => {
    Object.defineProperty(o, `key${i}`, readonly(i))
  })
  return o;
}

function test6() {
  const o = {};
  a100.forEach((_, i) => {
    Object.defineProperty(o, `key${i}`, readonly(i))
  })
  return o;
}

function test7() {
  const p = a100.reduce((prev, _, i) => {
    prev[`key${i}`] = readonly(i);
    return prev;
  }, {});
  return Object.defineProperties({}, p);
}

Tests:

test1
for (let i = 0; i < 1000; i++) { test1(); }
test2
for (let i = 0; i < 1000; i++) { test2(); }
test3
for (let i = 0; i < 1000; i++) { test3(); }
test4
for (let i = 0; i < 1000; i++) { test4(); }
test5
for (let i = 0; i < 1000; i++) { test5(); }
test6
for (let i = 0; i < 1000; i++) { test6(); }
test7
for (let i = 0; i < 1000; i++) { test7(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test1
test2
test3
test4
test5
test6
test7

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
test1	34.2 Ops/sec
test2	30.9 Ops/sec
test3	233.7 Ops/sec
test4	216.3 Ops/sec
test5	37.6 Ops/sec
test6	37.3 Ops/sec
test7	52.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript benchmarks can be complex, as it involves various options and considerations. Let's break down what's tested in this benchmark.

**Benchmark Definition**

The benchmark is designed to test how quickly different approaches can create and define properties on an object. The tests are run repeatedly using a `for` loop, with each iteration running the same function (`test1`, `test2`, etc.).

**Options Compared**

There are six options compared in this benchmark:

1. **`Object.defineProperties()`**: This method is used to define properties on an object. It takes two arguments: the object and an array of property descriptors.
2. **`Object.defineProperty()`**: This method is used to define a single property on an object. It takes three arguments: the object, the property name, and a property descriptor.
3. **Direct Property Assignment**: This option simply assigns properties directly on the object without using any special methods.

**Test Results**

The benchmark results show that the fastest approach depends on the specific test:

* `test1` (Object.create() + Object.defineProperty()):
	+ Chrome 110: ~34 ms/execution
* `test2` (Object.create() + Object.defineProperty()):
	+ Chrome 110: ~30 ms/execution
* `test3` (Direct Property Assignment):
	+ Chrome 110: ~52 ms/execution
* `test4` (Object.defineProperties()):
	+ Chrome 110: ~37 ms/execution
* `test5` (Object.defineProperty()):
	+ Chrome 110: ~37 ms/execution
* `test6` (Direct Property Assignment):
	+ Chrome 110: ~34 ms/execution

**Key Takeaways**

1. Direct Property Assignment is generally the fastest approach, as it avoids the overhead of creating a property descriptor and calling a special method.
2. Using `Object.defineProperty()` or `Object.defineProperties()` can be faster than assigning properties directly, especially if you need to specify additional metadata (e.g., accessors).
3. The performance difference between these options may not be noticeable in all scenarios, but it's essential to consider the specific requirements of your use case.

Keep in mind that benchmark results can vary depending on factors like browser version, hardware, and software configuration.

Related benchmarks:

bind props test (version: 0)

bind props test

Comparing performance of: test1 vs test2 vs test3 vs test4 vs test5 vs test6 vs test7

Created: one year ago by: Guest

Jump to the latest result

test1

test2

test3

test4

test5

test6

test7

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):