Benchmark: call vs prop & array vs map for both

Script Preparation code:

class Foobar {
  constructor () {
    this.n = 1
    this.funcs = [this.foo, this.bar, this.baz]
    this.funcMap = new Map(this.funcs.map((func, i) => [i, func]))
    this.props = ['foo', 'bar', 'baz']
    this.propMap = new Map(this.props.map((prop, i) => [i, prop]))
  }
  
  foo () {
    this.n *= 2
  }
  
  bar () {
    this.n *= 3
  }
  
  baz () {
    this.n /= 4
  }
}

var foobar = new Foobar()

Tests:

call (Array)
for (let i = 0; i < 100; i += 1) { foobar.funcs[i % 3].call(foobar) }
call (Map)
for (let i = 0; i < 100; i += 1) { foobar.funcMap.get(i % 3).call(foobar) }
prop (Array)
for (let i = 0; i < 100; i += 1) { foobar[foobar.props[i % 3]]() }
prop (Map)
for (let i = 0; i < 100; i += 1) { foobar[foobar.propMap.get(i % 3)]() }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
call (Array)
call (Map)
prop (Array)
prop (Map)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark definition is represented by a JSON object containing the following properties:

* `Name`: The name of the benchmark.
* `Description`: An empty string in this case, indicating that no detailed description is provided.
* `Script Preparation Code`: A JavaScript code snippet that creates an instance of the `Foobar` class, which has several methods and properties. This code sets up the environment for the benchmark.
* `Html Preparation Code`: Another empty string, indicating that no HTML preparation is required.

**Individual Test Cases**

The test cases are represented by an array of objects, each containing:

* `Benchmark Definition`: A JavaScript code snippet that defines a single test case. Each test case uses a different method to access the methods of the `Foobar` class:
	+ `call (Array)`: Uses the `call()` method on the array of function references.
	+ `call (Map)`: Uses the `call()` method on the map of function references, similar to the array approach.
	+ `prop (Array)`: Uses direct property access on the `Foobar` object using the property names from the `props` array.
	+ `prop (Map)`: Uses direct property access on the `Foobar` object using the property names from the `propMap` map.

**Options Compared**

The benchmark compares four different approaches to accessing methods of an object:

1. **Array approach**: Using `call()` method on the array of function references.
2. **Map approach**: Using `call()` method on the map of function references, similar to the array approach.
3. **Property access (Array)**: Directly accessing properties of the `Foobar` object using the property names from the `props` array.
4. **Property access (Map)**: Directly accessing properties of the `Foobar` object using the property names from the `propMap` map.

**Pros and Cons**

* **Array approach**: Pros:
	+ Easy to implement and understand.
	+ Can be useful for cases where the method references are stored in an array.
Cons:
	+ May have performance overhead due to the additional indirection.
* **Map approach**: Similar pros and cons as the array approach, with the added benefit of being more flexible than arrays (e.g., can handle duplicate keys).
* **Property access (Array)**: Pros:
	+ Fast and direct access to properties.
Cons:
	+ May not be suitable for cases where the property names are dynamic or complex.
* **Property access (Map)**: Similar pros and cons as the property access approach, with the added benefit of being more flexible than arrays.

**Other Considerations**

The benchmark also measures the performance of different browsers (Firefox 62) on different devices (Desktop), operating systems (Linux). This suggests that the benchmark is interested in evaluating cross-browser compatibility and device-specific performance differences.

**Libraries Used**

There is no explicit mention of any libraries used in the benchmark. However, it's likely that some libraries or frameworks are being tested implicitly by using specific features or syntax. In this case, there is no evidence to suggest that any external libraries are being used.

**Special JS Features or Syntax**

The benchmark uses JavaScript methods and syntax, such as:

* `call()`: A method for invoking a function with a specific context.
* Arrays and maps: Data structures for storing collections of values.
* Property access: Accessing properties of an object using dot notation (e.g., `foobar.propName()`).

These features are all core JavaScript constructs that should be widely supported by modern browsers.

**Alternatives**

If the benchmark were to be rewritten, alternative approaches could include:

* Using a different data structure, such as a Set or a custom array implementation.
* Implementing a custom accessor pattern for accessing methods of an object.
* Using a different browser or version for testing.
* Adding more test cases to evaluate additional scenarios.

However, the current benchmark setup provides a good balance of options and considerations for evaluating the performance differences between these approaches.

Latest run results:

Run details: (Test run date: 6 years ago)

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

Browser/OS: Firefox 62 on Linux

View result in a separate tab

Test name	Executions per second
call (Array)	492176.4 Ops/sec
call (Map)	193730.2 Ops/sec
prop (Array)	462544.2 Ops/sec
prop (Map)	198468.5 Ops/sec

Related benchmarks:

call vs prop & array vs map for both (version: 0)

Comparing performance of: call (Array) vs call (Map) vs prop (Array) vs prop (Map)

Created: 6 years ago by: Guest

Jump to the latest result

call (Array)

call (Map)

prop (Array)

prop (Map)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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