Benchmark: Closures vs Calls (with setup incl)

Script Preparation code:

window.data = []
for (let i = 0; i < 1000; i++) {
  window.data.push({a: Math.floor(Math.random() * 100), b: Math.floor(Math.random() * 100)})
}

Tests:

Call the same calc function with different arguments
const { data } = window class DataItem { a b constructor(a, b, c) { this.a = a this.b = b } calc(c) { return `${this.a} + ${this.b} + ${c} = ${this.a + this.b + c}` } } const fnCalls = [] for (let c = 0; c < data.length; c++) { const { a, b } = data[c] const dataItem = new DataItem(a, b) fnCalls.push([dataItem.calc, dataItem, [c]]) } fnCalls.forEach(([fn, thisArg, args] = call) => console.log(fn.apply(thisArg, args)) )
Call separate closures for each calc
const { data } = window const fns = [] for (let c = 0; c < data.length; c++) { const {a, b} = data[c]; const fn = function() { return `${a} + ${b} + ${c} = ${a + b + c}` } fns.push(fn) } fns.forEach(fn => console.log(fn()))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Call the same calc function with different arguments
Call separate closures for each calc

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

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Call the same calc function with different arguments	181.0 Ops/sec
Call separate closures for each calc	250.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining what is tested on the provided JSON, comparing options, and discussing pros and cons.

**Benchmark Definition Overview**

The benchmark measures the performance difference between two approaches: calling a closure (function) with different arguments versus calling separate closures for each calculation. The test creates an array of 1000 random data points (`window.data`) and uses them to set up two scenarios:

1. **Call the same calc function with different arguments**: This approach reuses the same closure function (`calc`) with different input values, passing `this` as an argument.
2. **Call separate closures for each calc**: This approach creates a new closure function for each data point, using `this` as an argument.

**Options Compared**

The two options being compared are:

A) Reusing the same closure function (`calc`) with different arguments
B) Creating separate closures for each calculation

**Pros and Cons of Each Approach**

1. **Reusing the same closure function (A)**:
	* Pros:
		+ Reduces memory allocation and garbage collection overhead
		+ Can lead to better caching and inlining of the closure function
	* Cons:
		+ May introduce slower startup times due to the initial function creation
		+ Can make debugging more complex if the closure function is not properly initialized
2. **Creating separate closures for each calculation (B)**:
	* Pros:
		+ Easier to debug and understand, as each closure has a clear scope
		+ Allows for more flexibility in handling different input values
	* Cons:
		+ Increases memory allocation and garbage collection overhead
		+ May lead to slower performance due to the creation of multiple closures

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, it appears that the `window.data` array is being used to store random data points.

**Special JS Feature or Syntax**

None are explicitly mentioned.

**Other Considerations**

* **Warm-up overhead**: Both approaches may have some warm-up overhead due to the initial function creation or initialization.
* **Cache optimization**: The browser's cache may optimize the performance of both approaches, making it harder to distinguish between them.

**Alternatives**

Some possible alternatives to consider:

* Using a different data structure, such as an object with method properties, instead of an array with closure functions
* Adding more complex logic or computations to the closure functions to make the benchmark more realistic
* Using a different browser or version to see how it affects the performance

Keep in mind that these alternatives may not provide meaningful insights into the performance characteristics of the original benchmark.

Related benchmarks:

Closures vs Calls (with setup incl) (version: 0)

Comparing performance of: Call the same calc function with different arguments vs Call separate closures for each calc

Created: one year ago by: Guest

Jump to the latest result

Call the same calc function with different arguments

Call separate closures for each calc

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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