search

tangbc / vue-virtual-scroll-list

⚡️A vue component support big amount data list with high render performance and efficient.
https://tangbc.github.io/vue-virtual-scroll-list
MIT License
4.41k stars 593 forks source link

Severe lag spikes while scrolling #298

Open bluskript opened 3 years ago

bluskript commented 3 years ago

When trying to use vue-virtual-scroll-list in a project of mine, I noticed that the app started experiencing some really heavy lag whenever I scrolled far enough. If I use the Vue debugger, I see that there is a massive amount of events being dispatched at those times, which leads me to suspect that I'm probably missing something important. Here is a video demonstrating the issue:

https://user-images.githubusercontent.com/52386117/103446311-30824000-4c4c-11eb-8b56-b563ae1d4f0b.mp4

Also, here is a list of things I have tried and were proven unsuccessful:

Here is the code: https://github.com/harmony-development/tempest/blob/virtual-scroller-test/components/Chat/Messages/index.vue

tangbc commented 3 years ago

These events are both necessary inside component, is there make performance problems or stuck?

bluskript commented 3 years ago

Freezes. It's smooth until I scroll far enough, and then the UI freezes for a second as I have shown in the video.

gongxiansheng commented 3 years ago

I meet the same question

tangbc commented 3 years ago

One of the problems I found before is that when Chrome Devtool is turned on, it will get stuck. When Chrome Devtool is turned off, it will be OK.

bluskript commented 3 years ago

I disabled all extensions and tested without Chrome Devtools, but there is still a lot of lag.

bluskript commented 3 years ago

I think there are too many resized and item_resized, at the time of the freeze there are 122 events. There are only 50 items in the list. This means that the resize event is being called for every single item in the list, not just new ones. image

JeffJassky commented 3 years ago

Having the same issue. Completely freezes and locks up even with devtools closed.

bluskript commented 3 years ago

https://user-images.githubusercontent.com/52386117/104789353-d82a6280-5762-11eb-8849-b097770799a2.mp4

It happens with plain <span>s too. Clearly an issue with the app configuration, I will do some more debugging. It might be a problem with Vuetify...

update: having Vuetify in the same app doesn't cause any lag.

update: screw it i'm rewriting my app from scratch, this time hopefully it'll have no issues...

bluskript commented 3 years ago

I found an answer! After rewriting my app with some less bloated components, I found that the virtual scroller was still laggy, at which point I decided to fiddle around with the :keeps and :estimate-size props, and after a bit of experimentation and math, I came to the following: :estimate-size="40" :keeps="36" It scrolls much smoother now, although still laggier than whatever Discord is doing.

fkranenburg commented 3 years ago

Same issue here. Also tried the trick that @Bluskript mentioned but it did not fix the issue. Closing devtools also not helping.

xmggy commented 3 years ago

When I try to use Vue virtual scroll list to load a lot of data in my project, I notice that as long as I scroll far enough, the application will start to encounter some very serious delays and the screen will be white. How can I add the loading effect during this white screen time?Help me,thanks!

pavellzubkov commented 3 years ago

very freezy lags... i'll go back to v-for) . very hard lags when updating real list (keeps parameter). even if component contain only text from source