Hi I am working on a virtual scroll component for scrolling a large table (10k rows *60 columns) each cell has 3 nested divs(in my actual code there is a list of tasks inside each cell). Since I cannot share my original code I have made a minimal working repo here https://codesandbox.io/s/7lvc4.
It’s overall very simple ,( i took the idea from various posts on forums).
On the scroll event I use the scrollTop of container and total item count and item size to find the start and end indices and create my virtualItems subset which is bound to the DOM in VUE template.
The VScroll component takes the large list as props and passes calculated virtual list as a slot prop to the parent , Parent renders the items required by current viewport.
My insights and problems are :
1 Try scrolling via the scroll wheel and scrollbar , scrolling with the scroll bar is smooth while the scrollwheel causes blank flicks in rendering
2 How does vue update the components , if i were to do manually do some dom update on a scroll event I would debounce the updates inside a requestanimation frame call and manipulate DOM inside RAF to ensure a smooth framerate . But in vue we update data and inturn vdiff is calculated and ends up . updating the DOM , Am I right ?. So how can I control this
3 How do I measure time time taken for DOM updates ?
I am using a performance.time() console difference between before update and updated call . Is this the right way .
Basically I need the component to update fast enough between scroll events to ensure a smooth framerate . I tried profiling with chrome dev tools and noticed some frames are blank . ( I am not a performance expert ,so forgive me for any mistakes)
4 The reason I have the v scroll as a separate component is to avoid the parent from re-rendering each time due to data change .
5 Finally , When I use the same inside my large app performance crawls . i thought fixing and understanding the minimal implementation would aid in the above .