Performance for something like this is critical. How do you test or plan on testing performance to prevent regressions? I’ve yet to crack this nut in a way that makes me happy.
React and Konva provides a Profiler and Devtools to measure performance and to prevent any un-necessary re-renders.
We also measure the Canvas FPS to make sure rendering is at max 60fps. The bottleneck we have identified is with scrolling large amounts of text, especially in large 42 inch 4K monitors, where FPS limits to 55-60fps. We do have some workaround planned for large monitors, by splitting the canvas into 4 layers.
In terms of regression, we use Cypress for most e2e testing, but the test cases are small as of now.
Slight degradation on Dell 42" 4K, could be because of the ppi or the pixel ratio, which might be causing canvas/row/cell/ dimensions to be not rounded to whole numbers (this can affect perf).
We start of with the FPS monitoring tool which measure the frame rate, memory consumption and GPU sange
We switch to devtools->Performance analysis to measure function call times, layout thrashes and shifts, RAF bottleneck, memory consumption and CPU time.
We also use React devtools to measure re-rendering.
Scrolling is wrapped in Request animation frame loop, hence its being controlled by the browsers frame rate.
At 42" 4k, there's probably no scaling, so more stuff fits on the screen.