-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
node-red web SVG UI performance degradation due to forced reflow with large number of nodes #4563
Comments
I have encountered a real project where a single flow contains 782 nodes. Comparatively, when observing the performance using Chrome DevTools, the "Performance" tab indicates a significant increase in frame time, from around 6.1ms to approximately 100ms, in comparison to a flow containing only one node. During mouse drag operations within the flow, it has been observed that there are over four thousand layout recalculations per frame, which are adversely impacted by Forced Reflows. Given these observations, I am interested in exploring potential optimization strategies. |
Current Behavior
When there is a large number of nodes in the Node-RED Web UI, forced reflow occurs, leading to performance degradation.
Descend to around ten frames per second
Expected Behavior
The Node-RED Web UI should maintain optimal performance even with a large number of nodes.
Steps To Reproduce
Create a Node-RED flow with a large number of nodes.
Drag a line from the right end of one node.
Observe the performance degradation in the Web UI.
demonstrate.mp4
Example flow
Copy the following nodes approximately 20 times. Because I actually have a flow containing 800 nodes
Environment
The text was updated successfully, but these errors were encountered: