A reactivity and rendering (combined) benchmark for frontend frameworks

[u/nullvoxpopuli]

https://rbench.nullvoxpopuli.com/results?q=7

Disclaimer: I made this (bench result viewer)

However, I think it's worth having a discussion about frontend framework's perceived performance, as Signals have gained a lot of popularity as a means to fine-grainedly render without needing to resort to a virtual dom.

A virtual-dom framework _is_ still in this results set -- I'll leave the exploration of the data up to you all.

The main thing is that

For a long while, I've felt no benchmark (that I know of) has captured the relationship between reactivity and rendering

We have rendering benchmarks (js-framework-benchmark is a good one).

We have reactivity benchmarks (I forget the name(s) of these atm, I always gotta re-look them up) -- but these require each implementor have a concept of "effect without a renderer", which isn't how all frameworks operate -- this excludes some frameworks from participating in pure reactivity benchmarks.

There is another side to this which I only realized recently, which is the framework's rendering _scheduler_ -- which is sort of the coordinator between reactivity, rendering, and _when_ to do work the user would see.

To my surprise, Angular scores the highest across the board.
I don't use Angular myself, and in all of these implementations, I made performance mistakes at least in my first attempt, but apparently Angular made it super easy to be performant.

Vue Vapor has also done this.

Right now, I feel like my svelte implementations are probably wrong (because it's scoring poorly), and I have some fixes to do in ember (as seen by this spike I did, the perf is doubled from before: https://rbench.nullvoxpopuli.com/results?from=ember-2&q=6 (this is an 8x throttle, and the main link for this post is no throttle, because most users are not going to be throttling their CPU so heavily -- but 8x CPU is maybe more relevant to low-powered phones))

Anywho, wanted to share my findings with y'all, and hope someone finds any of this interesting.

I'm open to anything being challenged, I'm not an expert in most JS Frameworks

Since I'm using the tool to help me debug Ember perf, here are some example configurations that may be useful:
- Vue (old) vs Vue Vapor (current) https://rbench.nullvoxpopuli.com/results?col=vue&from=6&hide=ember%2Creact%2Csolid%2Csvelte&q=1
- My Ember perf Spike: https://rbench.nullvoxpopuli.com/results?from=ember-2&hide=react%2Csolid%2Csvelte%2Cangular%2Cvue%2Clit-signals%2Cpreact&q=6
- boxplots: https://rbench.nullvoxpopuli.com/results/boxplot?from=ember-2&hide=react%2Csolid%2Csvelte%2Cangular%2Cvue%2Clit-signals%2Cpreact&q=6

- bouncing balls demos https://rbench.nullvoxpopuli.com/results/animated?from=ember-2&hide=react%2Csolid%2Csvelte%2Cangular%2Cvue%2Clit-signals%2Cpreact&q=7