Toggling element visibility causes noticeable slowdown and lags #1444
Replies: 3 comments 14 replies
-
The issue seems to be performance which could be anything really, since you haven't presented any repro or code-snippets I don't know what your application looks like and if you're not doing somehow causing some excessive re-renders unknowingly. Looking at the screenshot, re-mounting 5 nodes should not have any noticeable impact on performance whatsoever, even if they have a bit more complexity, which they don't look like they do in your img but who knows - could it be you're doing some heavy computations in those nodes? Is that necessary? Anyway, I'm moving this to discussions since there's no actual bug described here; possibly a feature/refactor request for how visibility of nodes could be handled instead :) |
Beta Was this translation helpful? Give feedback.
-
Check out the This feature is meant for these sort of graphs, where you use nested nodes. |
Beta Was this translation helpful? Give feedback.
-
Reproduction https://github.com/MatthewAry/vue-flow-1444 |
Beta Was this translation helpful? Give feedback.
-
So I'm using Vue Flow to render components as nodes for a data graph. They are fairly complex in comparison to the examples shown on the docs. I've made it so I can hide all descendant nodes by clicking a button on a parent node. The action of hiding descendants is fast but unhiding them is very slow and locks up the main thread.
![image](https://private-user-images.githubusercontent.com/157217/336573715-24d37ef2-f04f-4ee3-b9ac-5e8332c75d81.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA3MzkxNjQsIm5iZiI6MTcyMDczODg2NCwicGF0aCI6Ii8xNTcyMTcvMzM2NTczNzE1LTI0ZDM3ZWYyLWYwNGYtNGVlMy1iOWFjLTVlODMzMmM3NWQ4MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzExJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxMVQyMzAxMDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hZGI2YTNlMDNhNDM1OWE0ZjA1ZDIzNTcyZGQ1MjNiOTM4NTgxYjJjZTJiMDMzODY3YzJkYTFjODJlYzNlNzE2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.5YbV2xEvHM4TaM0hC9PzmwxHCbwv5FsmgOkwFuKUhyU)
When unhiding elements from the root node, the operation took over 100ms to complete. The flame graph on the perf monitor is pretty deep here.
Unhiding should be fairly quick. Would it be possible to do some kind of memoization of previously hidden elements instead of completely un-rendering them? That, or hide them using CSS?
The hide operation is handled by Vue Flow itself so I don't really have control over it too much.
Also, I'm not able to use Vue Flow's built in node parent referencing capabilities because it affects the way layouts are computed in an undesirable way.
Beta Was this translation helpful? Give feedback.
All reactions