Benchmark: RxJs vs Array - MeasureThat.net

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.2/rxjs.umd.min.js'></script>

Script Preparation code:

var source = Array(1000000).fill(1).map((_, i) => Math.random());

Tests:

Array
const arrayResult = source .map(n => n * 2) .filter(n => n > 0.5) .reduce((m, c) => Math.max(m, c));
RxJs
const transducerResult = rxjs.of(source).pipe( rxjs.operators.map(n => n * 2), rxjs.operators.filter(n => n > 0.5), rxjs.operators.reduce((m, c) => Math.max(m, c)) ).subscribe(console.log);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Array

16/s

RxJs

10/s

Fastest: Array (1.6x faster)

View exact numbers

✓ Array: 16 ops/sec
• RxJs: 10 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
Array
RxJs

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Array

19/s

RxJs

11/s

View exact numbers

Test name	Executions per second
✓ Array	19 Ops/sec
RxJs	11 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Overview**

The benchmark compares the performance of two approaches: `Array` and RxJS (a reactive programming library). The test case filters and transforms an array of 1 million random numbers to find the maximum value greater than 0.5.

**Options Compared**

There are two approaches compared:

1. **Array**: A traditional JavaScript approach using the `map`, `filter`, and `reduce` methods.
2. **RxJs**: A reactive programming library that provides a pipeline of operations to transform data. In this case, it's used to filter and transform the same array.

**Pros and Cons**

* **Array**:
	+ Pros: Simple, familiar API, no additional dependencies required.
	+ Cons: Can be slower due to the overhead of function calls and object creation.
* **RxJs**:
	+ Pros: Optimized for performance, provides a declarative way of writing pipelines, and can handle concurrency efficiently.
	+ Cons: Requires an additional dependency (the RxJS library), and its API can be unfamiliar to some developers.

**Library and Purpose**

The `rxjs` library is used in the benchmark. It provides a set of operators that can be combined to create complex data processing pipelines. In this case, the pipeline includes:

* `map`: Applies a transformation function to each element of the array.
* `filter`: Filters out elements that don't meet the specified condition.
* `reduce`: Reduces the array to a single value.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. It's purely functional programming with a focus on performance comparison.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* **Lo-Dash**: A functional programming library that provides a pipeline-like API similar to RxJS.
* **Lodash`: A utility library that includes functions for array manipulation, but doesn't provide a pipeline-like API like RxJs.
* **Java 8 Stream API**: If you're familiar with Java, you might find the Stream API's pipeline-like approach interesting. However, it would require additional setup and dependencies.

In conclusion, the benchmark provides a clear comparison between two approaches: traditional JavaScript arrays versus RxJS pipelines. The choice of approach depends on your specific use case, performance requirements, and personal preference.

RxJs vs Array (version: 0)

Comparing performance of: `Array vs RxJs`

Created: 5 years ago by: Guest

Go to the latest result

Array

RxJs

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

RxJs vs Array (version: 0)

Comparing performance of: Array vs RxJs

Created: 5 years ago by: Guest

Go to the latest result

Array

RxJs

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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: `Array vs RxJs`