Benchmark: RXJS single vs multi-pipe

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/rxjs@%5E7/dist/bundles/rxjs.umd.min.js'></script>

Script Preparation code:

var rawdata = [{"rect":{"y":80.39215686274508,"width":79.10307898259705,"height":17.64705882352941},"value":5909,"label":{"value":"2020-01-27 15:52:39.000","x":39.55153949129853,"y":89.21568627450979}},{"rect":{"y":60.784313725490186,"width":104.99330655957162,"height":17.64705882352941},"value":7843,"label":{"value":"2019-11-11 20:55:13.000","x":52.49665327978581,"y":69.60784313725489}},{"rect":{"y":41.17647058823529,"width":107.1619812583668,"height":17.64705882352941},"value":8005,"label":{"value":"2020-04-14 18:29:52.000","x":53.5809906291834,"y":49.99999999999999}},{"rect":{"y":21.56862745098039,"width":137.46987951807228,"height":17.64705882352941},"value":10269,"label":{"value":"2020-01-22 15:48:25.000","x":68.73493975903614,"y":30.392156862745097}},{"rect":{"y":1.9607843137254903,"width":270,"height":17.64705882352941},"value":20169,"label":{"value":"2020-01-03 19:09:13.000","x":135,"y":10.784313725490195}}];

Tests:

RXJS
let { from, Observable } = rxjs; let { flatMap, map, tap, toArray } = rxjs.operators; var data$ = from(rawdata) .pipe( toArray(), map(values => values.sort((a, b) => b.value - a.value)), map(values => values.reverse()), map(values => values.slice(0, 5)), tap((values) => { console.log(values.length); }), flatMap(values => values), map(bar => ({ value: bar.value, label: bar.label })), toArray() ); let data; data$.subscribe(d => data = d);
RxJS Separate pipes
let { from, Observable } = rxjs; let { flatMap, map, tap, toArray } = rxjs.operators; var data$ = from(rawdata) .pipe(toArray()) .pipe(map(values => values.sort((a, b) => b.value - a.value))) .pipe(map(values => values.reverse())) .pipe(map(values => values.slice(0, 5))) .pipe(tap(values => { console.log(values.length); })) .pipe(flatMap(values => values)) .pipe(map(bar => ({ value: bar.value, label: bar.label }))) .pipe(toArray()); let data; data$.subscribe(d => data = d);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RXJS
RxJS Separate pipes

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/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
RXJS	125987.3 Ops/sec
RxJS Separate pipes	117905.6 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**Benchmark Overview**

The benchmark is designed to compare two different approaches for processing data in JavaScript using RxJS, a popular library for reactive programming. The goal is to determine which approach is more efficient in terms of execution speed.

**Test Case 1: "RXJS"**

In this test case, the code uses the `pipe` method to chain multiple operations together:
```javascript
var data$ = from(rawdata)
      .pipe(
        toArray(),
        map(values => values.sort((a, b) => b.value - a.value)),
        map(values => values.reverse()),
        map(values => values.slice(0, 5)),
        tap((values) => { console.log(values.length); }),
        flatMap(values => values),
        map(bar => ({ value: bar.value, label: bar.label })),
        toArray()
      );
```
Here's what's happening:

1. `from(rawdata)` converts the input data array to an observable.
2. `toArray()` collects all elements from the observable into an array.
3. `map` sorts the array in descending order by value.
4. `map` reverses the sorted array.
5. `map` takes a slice of the first 5 elements.
6. `tap` logs the length of the sliced array to the console.
7. `flatMap` flattens the array back into an observable.
8. `map` transforms each element into an object with value and label properties.
9. `toArray()` collects all transformed elements into a final array.

**Test Case 2: "RxJS Separate pipes"**

In this test case, the code uses separate calls to `pipe` for each operation:
```javascript
var data$ = from(rawdata)
      .pipe(toArray())
      .pipe(map(values => values.sort((a, b) => b.value - a.value)))
      .pipe(map(values => values.reverse()))
      .pipe(map(values => values.slice(0, 5)))
      .pipe(tap(values => { console.log(values.length); }))
      .pipe(flatMap(values => values))
      .pipe(map(bar => ({ value: bar.value, label: bar.label })))
      .pipe(toArray());
```
The code is similar to the first test case, but with separate calls to `pipe` for each operation.

**Benchmark Results**

The results show that:

* Test Case 1 ("RXJS") has an execution speed of approximately 171650.11 executions per second.
* Test Case 2 ("RxJS Separate pipes") has an execution speed of approximately 166077.30 executions per second.

This indicates that the first test case is about 3% faster than the second one.

**Library and Features Used**

The code uses RxJS, a popular library for reactive programming in JavaScript. The key features used are:

* `from`: Converts an array to an observable.
* `pipe`: Chains multiple operations together.
* `toArray`: Collects all elements from an observable into an array.
* `map`: Transforms each element in an array or observable.
* `flatMap`: Flattens an array back into an observable.
* `tap`: Logs a value to the console without affecting the observable.

**Other Alternatives**

In terms of alternative approaches, you could use:

* Lodash's `chain` method for chaining multiple operations together.
* Vanilla JavaScript's `reduce` and `map` methods for processing data.
* Other reactive libraries like MobX or Cycle.js.

Related benchmarks:

RXJS single vs multi-pipe (version: 0)

Comparing performance of: RXJS vs RxJS Separate pipes

Created: 2 years ago by: Guest

Jump to the latest result

RXJS

RxJS Separate pipes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):