Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
RXJS vs Vanilla
(version: 0)
Comparing performance of:
RXJS vs Vanilla
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src="https://d3js.org/d3.v5.min.js"></script> <script src='https://unpkg.com/rxjs@6.5.5/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}}]; var x = d3.scaleLinear().range([0, 300]); var y = d3.scaleBand().range([250, 0]).padding(0.1);
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) => { x = x.domain([0, d3.max(values, d => d.value)]); y = y.domain(values.map((d) => d.label)); }), flatMap(values => values), map(bar => ({ rect: { y: y(bar.label), width: x(bar.value), height: y.bandwidth() }, value: bar.value, label: { value: bar.label, x: x(bar.value) <= 300 / 5 ? x(bar.value) + 10 : x(bar.value) / 2, y: y(bar.label) + y.bandwidth() / 2 } })), toArray() ); let data; data$.subscribe(d => data = d);
Vanilla
let values = rawdata.sort((a, b) => a.value - b.value).slice(0, 5); // Set x and y values x = x.domain([0, d3.max(values, d => d.value)]); y = y.domain(values.map((d) => d.label)); // Set bars on chartmap var data = values.map(bar => ({ rect: { y: y(bar.label), width: x(bar.value), height: y.bandwidth() }, value: bar.value.toString(), label: { value: bar.label, x: x(bar.value) <= 300 / 5 ? x(bar.value) + 10 : x(bar.value) / 2, y: y(bar.label) + y.bandwidth() / 2 } }))
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
RXJS
Vanilla
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
28 days ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Browser/OS:
Chrome 146 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
RXJS
107036.9 Ops/sec
Vanilla
390591.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested, compared, and their pros and cons. **Benchmark Definition** The benchmark is comparing two approaches: one using ReactX (RXJS) and another using vanilla JavaScript. **Vanilla Approach** In the vanilla approach, the code uses `d3` library to create a bar chart. Here's what's happening: * The data is sorted in descending order by value. * Two functions, `x` and `y`, are created using `d3.scaleLinear()` and `d3.scaleBand()`, respectively. These functions map values to positions on the x-axis and y-axis of the chart. * The data is then mapped to create bar objects with `rect` properties (width, height, and position). Each bar's value is displayed as a string. **RXJS Approach** In the RXJS approach: * A reactive stream (`data$`) is created using `rxjs.from()` and `rawdata`. * Several operators are applied to this stream: + `toArray()`: Converts the stream to an array. + `map()`: Sorts the values in descending order. This creates a new array with reversed values. + `slice(0, 5)`: Takes only the first five elements of the sorted array. * The `tap()` function is used to update the domain of `x` and `y` functions based on the maximum value of the sliced array. * Finally, `flatMap()` and `map()` are applied again to create bar objects with `rect` properties (width, height, and position). These bars have values that are converted to numbers. **Comparison** The benchmark is measuring the performance difference between these two approaches: RXJS vs vanilla JavaScript. **Pros and Cons of Each Approach** * **Vanilla Approach** + Pros: - Easy to understand and implement. - No external dependencies (D3.js). + Cons: - More verbose code due to manual scaling and mapping. - May have slower performance compared to RXJS due to the overhead of manual DOM updates. * **RXJS Approach** + Pros: - More concise and expressive code using reactive streams. - Automatic scaling and mapping with operators. + Cons: - External dependencies (RXJS). - May have slower performance compared to vanilla JavaScript due to the overhead of reactive stream operations. **Other Considerations** * The benchmark uses Firefox 130 as the test browser, which may not be representative for other browsers or platforms. * The `d3` library is used in both approaches, but its version and configuration are different between the two. This could affect the results if the versions have different performance characteristics. **Alternatives** If you're looking for alternative libraries or approaches: * For charting: Consider using Chart.js or other popular charting libraries. * For reactive streams: Look into other reactive stream libraries like RxJS Alternatives (e.g., MobX, Redux) or plain JavaScript alternatives to RXJS (e.g., async/await with promises). * For vanilla JavaScript optimization: Explore techniques like code splitting, memoization, and caching to improve performance.
Related benchmarks:
RXJS vs Vanilla v7.5.6
RXJS 7.8.0 vs Vanilla
RXJS 6 vs Vanilla #2
RXJS single vs multi-pipe
Comments
Confirm delete:
Do you really want to delete benchmark?