Skip to content
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

use async render to enhance large tree #24

Open
1 of 2 tasks
eidng8 opened this issue Apr 12, 2020 · 1 comment
Open
1 of 2 tasks

use async render to enhance large tree #24

eidng8 opened this issue Apr 12, 2020 · 1 comment
Labels
feature New feature implementation
Projects
Milestone

Comments

@eidng8
Copy link
Owner

eidng8 commented Apr 12, 2020

Currently, while rendering large tree, a severe lag/freeze makes it very unresponsive. The thought is to break down the rendering into steps, instead of rendering the whole list at once. However, we can't use v-if directive or anything similar. Because v-if itself lags/freezes too.

  • An alternative could be, use asynchronous rendering function to render one immediate level at a time. Once it is rendered, it must not be rendered again. Gradually, the list will be populated completely if the tree is navigated completely through. This solves one aspect of the issue.
  • The other aspect is that the immediate children of one node could be very long, this will still cause lag. The render function has to break down the whole rendering process into small steps. Either via timer interval, or Vue's tick callback. However, it's not yet clear whether either of these would work. Research is needed.
@eidng8 eidng8 added the feature New feature implementation label Apr 12, 2020
@eidng8 eidng8 added this to To do in vue-tree via automation Apr 12, 2020
@eidng8 eidng8 added this to the 1.0.0 milestone Apr 12, 2020
@eidng8
Copy link
Owner Author

eidng8 commented Apr 13, 2020

After testing with a simple 1000-node 2-level tree, it seems the rendering speed is quite good. With the newly added rendered field, it reacts instantly to clicks. But the browser spends around 1 second on major GC when a sub-tree is expanded. Although the DOM structure has not changed.

Will try to test more on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature implementation
Projects
vue-tree
  
To do
Development

No branches or pull requests

1 participant