I'm trying to resolve a performance issue, which is not my expertise at all. Updating the transform CSS property of a thousand SVG nodes shouldn't be a problem, right?
@vinnl I'm not sure, but SVG isn't the fastest. I built some test apps using d3-force graph on both SVG and Canvas for comparison with different graph connectivities and sizes.
I wasn't tweaking CSS though, so no idea about that. I was animating the the force layout and dragging nodes with the mouse. Also found Chrome much faster than Firefox (~1 to 2 yr ago).
@vinnl that should not be a problem. I'm working on an animation thing as we speak and I just ran a profiler on it.
The entire transform piece of the pipeline happens in "Rendering" and "Painting", so if you run a profiler on your application, and if those two things aren't your bottleneck then it is not possible for that CSS to be the issue.
@tychi Yeap, I was coming to that conclusion too. It looks like the bottleneck is React updating the props of 1000 elements and re-rendering them, calculating new sizes for each of them. I'm starting to believe that that just takes a second... 😟
@vinnl On this note, I've been noticing my performance bottlenecks are all React based, so I've been working on a new lightweight framework.
I've been building it with the intention to use it to build what's described here: https://forum.solidproject.org/t/idea-launcher-app/3468
There's not much documentation yet, but I've been using it heavily at work and am super excited about the potential for beneficient web apps. There's no build system, so everything runs in the browser, just leveraging how dope the platform currently is:
The kicker is that you can also use it with React, so if your one feature is the issue, you could escape out into this paradigm and let the DOM handle it and circumvent React's virtual DOM.
@tychi Thanks, and such a launcher app would be great — give me a holler if you need help with the specifics of Solid :)
I think in this case the slowdown is happening in React, but is not caused by it. I've got a 1000 bars in a number of bar charts, and every one of them needs to be resized to a different height.
Although, spelling it out like this... I wonder if it would be faster if I moved the scale calculation into CSS, and just set the ratio in a CSS variable 🤔
@vinnl definitely will reach out when I'm ready to integrate with Solid, thanks :)
It might, but depends on where the bottleneck is. Is it when the calculations are running or when the rendering happens?
If it's the rendering, the aspect-ratio would still impact the height, so it might not save you there. It is hard to say from my end though without being in the weeds of the specific implementation 🙃
@tychi When the calculations are running (when React is rendering to the virtual DOM, so not the browser's render cycle), so that gives some hope. I'll see if I have some time to give that a shot tonight.
@vinnl good luck! if it comes to it and you can get it into a repl, i might be able to help troubleshoot too
If you need max performance, however, you need to use #WebGL, meaning rendering it on the graphics card.
There is a great article on how to use WebGL with d3.js. Maybe it can help you (even if you don't use d3.js).😉
@janriemer Thanks Jan! I am using D3, but not for rendering. That said, it's primarily a learning project, and it looks like these are the main lessons for me today:
> SVG charts can typically handle around 1,000 datapoints. (..) With Canvas you can expect to render around 10,000 datapoints whilst maintaining smooth 60fps interactions.
Server run by the main developers of the project It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!