Severe lag spikes while scrolling

[bluskript]

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:

2021-01-01.16-10-37.mp4

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

• Removing avatars and time strings
• Setting a fixed height on the scroll container
• Remove all local state for messages
• Disable markdown formatting

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

[tangbc]

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

[bluskript]

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]

I meet the same question

[tangbc]

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]

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

[bluskript]

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.

[JeffJassky]

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

[bluskript]

2021-01-15.18-51-43.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]

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]

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

[xmggy]

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]

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