Performance Improvement: Enhancing Web UI Rendering Speed for "showDragLines"

[fullmooooon]

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Proposed changes

This PR focuses on optimizing the performance of the showDragLines feature in the web UI, resulting in a significant improvement of approximately 2x. Through testing on Edge DevTools performance page, it was observed that the "Long Task" duration for a Node-RED flow page containing 800 nodes decreased from around 90ms to 50ms. This translates to an increase in frame rate from approximately 11 frames per second to 20 frames per second.

I am not sure why these few lines of code I have modified are effective. My changes probably have no side effects

Checklist

• I have read the contribution guidelines
• For non-bugfix PRs, I have discussed this change on the forum/slack team.
• I have run npm run test to verify the unit tests pass
• I have added suitable unit tests to cover the new/changed functionality

[linux-foundation-easycla]

• ✅login: fullmooooon / (b3d289a)
• ✅login: fullmooooon / (b3d289a, 3002f7f)
• ✅login: fullmooooon / (b3d289a, 3002f7f, 3a50fbf)
• ✅login: fullmooooon / (b3d289a, 3002f7f, 3a50fbf, 3b5246d)
• ✅login: fullmooooon / (b3d289a, 3002f7f, 3a50fbf, 3b5246d, 33a35cc)

The committers listed above are authorized under a signed CLA.

[knolleary]

Hi @fullmooooon - thanks for this.

Your changes causes it to bypass redrawing the view whilst dragging new links around. So whilst it is doing less work, it does now mean some updates aren't happening that should.
For example, with the link nodes, you can see here (just about... assuming the gif compression doesn't hide it...) when I start to drag a link, the circle port on the right-hand link node appears as a target for the link:

That only works if _redraw() gets called to refresh the node appearance.

So whilst I'm sure there are optimisations to be had, I think this one is maybe a bit too simple.