node-red web SVG UI performance degradation due to forced reflow with large number of nodes

[fullmooooon]

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

[{"id":"bbe01c7420878f04","type":"function","z":"0eea570ad552021f","name":"function 139","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":450,"y":300,"wires":[["00beed838fe1b1ef"]]},{"id":"00beed838fe1b1ef","type":"switch","z":"0eea570ad552021f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"},{"t":"eq","v":"","vt":"str"}],"checkall":"true","repair":false,"outputs":8,"x":710,"y":300,"wires":[["6453d740cd4cad01"],["dd4c9ce2563d6152"],["76e871108cd7f6af"],["b93e73fc7e357324"],["b3eb44b263a09a13"],["e83c14dbf2f2ce2a"],["66e91a56fd734625"],["f3064db696057b4d"]]},{"id":"6453d740cd4cad01","type":"function","z":"0eea570ad552021f","name":"function 140","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":220,"wires":[["a3d322ba93bbe644"]]},{"id":"dd4c9ce2563d6152","type":"function","z":"0eea570ad552021f","name":"function 141","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":260,"wires":[["33e0cb7b900bd8a7"]]},{"id":"76e871108cd7f6af","type":"function","z":"0eea570ad552021f","name":"function 142","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":300,"wires":[["e90367b511cb5cfb"]]},{"id":"b93e73fc7e357324","type":"function","z":"0eea570ad552021f","name":"function 143","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":340,"wires":[["6a035e658f22e346"]]},{"id":"b3eb44b263a09a13","type":"function","z":"0eea570ad552021f","name":"function 144","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":380,"wires":[["ef363349d6ce8e18"]]},{"id":"e83c14dbf2f2ce2a","type":"function","z":"0eea570ad552021f","name":"function 145","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":420,"wires":[["a4fe65f97e430ca6"]]},{"id":"66e91a56fd734625","type":"function","z":"0eea570ad552021f","name":"function 146","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":460,"wires":[["0ca8223aaa03e4a6"]]},{"id":"f3064db696057b4d","type":"function","z":"0eea570ad552021f","name":"function 147","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":930,"y":500,"wires":[["7fa4f1d372216ab9"]]},{"id":"a3d322ba93bbe644","type":"debug","z":"0eea570ad552021f","name":"debug 483","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":220,"wires":[]},{"id":"33e0cb7b900bd8a7","type":"debug","z":"0eea570ad552021f","name":"debug 484","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":260,"wires":[]},{"id":"e90367b511cb5cfb","type":"debug","z":"0eea570ad552021f","name":"debug 485","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":300,"wires":[]},{"id":"6a035e658f22e346","type":"debug","z":"0eea570ad552021f","name":"debug 486","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":340,"wires":[]},{"id":"ef363349d6ce8e18","type":"debug","z":"0eea570ad552021f","name":"debug 487","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":380,"wires":[]},{"id":"a4fe65f97e430ca6","type":"debug","z":"0eea570ad552021f","name":"debug 488","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":420,"wires":[]},{"id":"0ca8223aaa03e4a6","type":"debug","z":"0eea570ad552021f","name":"debug 489","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":460,"wires":[]},{"id":"7fa4f1d372216ab9","type":"debug","z":"0eea570ad552021f","name":"debug 490","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1190,"y":500,"wires":[]},{"id":"03bd678ae1952ded","type":"inject","z":"0eea570ad552021f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":300,"wires":[["bbe01c7420878f04"]]}]

Environment

• Node-RED version: v3.1.4
• Node.js version: v16.20.2
• npm version: 8.19.4
• Platform/OS: windows 11@23H2
• Browser: Microsoft Edge@121.0.2277.106

[fullmooooon]

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.

[fullmooooon]

#4594