Benchmark: iterators vs callbacks

Script Preparation code:

function* iterator(size) {
 	for (let i = 0; i < size; i++) {
      yield i;
    }
}

function callback(size, cb) {
  for (let i = 0; i < size; i++) {
    cb(i);
  }
}

var N = 100000;

Tests:

iterator
let sum = 0; for (const i of iterator(N)) { sum += i*Math.random(); }
callback
let sum = 0; callback(N, i => { sum += i*Math.random(); });

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 16 runs

callback

400/s

iterator

234/s

Fastest: callback (1.7x faster)

View exact numbers

✓ callback: 400 ops/sec
• iterator: 234 ops/sec

Firefox 11 runs

callback

1K/s

iterator

240/s

Fastest: callback (4.5x faster)

View exact numbers

✓ callback: 1,068 ops/sec
• iterator: 240 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
iterator
callback

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Firefox 146 on Linux

View result in a separate tab

callback

378/s

iterator

73/s

View exact numbers

Test name	Executions per second
✓ callback	378 Ops/sec
iterator	73 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this specific benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches: using iterators and using callbacks. Both methods are used to iterate over a large dataset (100,000 elements) and perform a calculation on each element.

**Iterator Approach**

In the iterator approach, a generator function `iterator(size)` is defined. This function uses a for loop to iterate over the range of numbers from 0 to `size-1` (since JavaScript arrays are 0-indexed). The `yield` keyword is used to produce values from the generator, which are then collected by the caller.

In the test case, the iterator is used in a for-of loop to iterate over the generated values. For each value, it multiplies the value with a random number between 0 and 1 and accumulates the result in the `sum` variable.

**Callback Approach**

The callback approach uses a separate function `callback(size, cb)` that takes two arguments: `size` (the same as in the iterator approach) and a callback function `cb`. The callback function is expected to take one argument (`i`) and perform some operation on it.

In the test case, the callback function is passed as an argument to the `callback` function. For each value in the range of numbers from 0 to `size-1`, the callback function is called with that value as an argument, multiplying it by a random number between 0 and 1 and accumulating the result in the `sum` variable.

**Comparison**

The two approaches are compared based on their performance. The benchmark measures the number of executions per second (ExecutionsPerSecond) for each approach.

**Pros and Cons**

**Iterator Approach:**

Pros:

* More efficient memory usage, as it doesn't create an intermediate array to store the values.
* Can be more concise and expressive in some cases.

Cons:

* May be slower due to the overhead of the generator function.
* Not all browsers support generators (although most modern ones do).

**Callback Approach:**

Pros:

* More widely supported by older browsers, as it doesn't rely on generators.
* Can be easier to understand for developers familiar with callbacks.

Cons:

* Creates an intermediate array to store the values, which can lead to higher memory usage.
* May be less concise and expressive than the iterator approach.

**Library Usage**

There is no explicit library usage in this benchmark. However, it's worth noting that MeasureThat.net often uses libraries like Lodash or Ramda for more complex benchmarks.

**Special JS Features/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond generators and callbacks. If you're interested in exploring other features, such as async/await, promise chaining, or modern ES6+ syntax, MeasureThat.net can definitely accommodate that!

**Alternatives**

If you'd like to explore similar benchmarks or compare different approaches on your own, some alternatives include:

* Benchmarking libraries likeBenchmark.js or HighPerformanceBenchmarks.
* Online platforms like jsbench.net or CodePen's benchmarking feature.

Keep in mind that these alternatives might not be as comprehensive or well-maintained as MeasureThat.net.

iterators vs callbacks (version: 0) Benchmark.js

Comparing performance of: `iterator vs callback`

Created: 3 years ago by: Guest

Go to the latest result

iterator

callback

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 16 runs

Firefox 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

iterators vs callbacks (version: 0) Benchmark.js

Comparing performance of: iterator vs callback

Created: 3 years ago by: Guest

Go to the latest result

iterator

callback

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 16 runs

Firefox 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `iterator vs callback`