4 ms·
Perhaps react virtual list (https://github.com/developerdizzle/react-virtual-list https://github.com/developerdizzle/react-virtual-list) ? I've investigated th
by 1_player 10y ago
Perhaps react virtual list (https://github.com/developerdizzle/react-virtual-list https://github.com/developerdizzle/react-virtual-list) ?
I've investigated the problem on a VueJS app which rendered a live-updated table-like DOM with thousands of rows, and was quite slow in rendering and scrolling, especially on mobile. For my use case the easiest solution was to render the first X elements, on-the-fly render the next elements as you scrolled down and disable the VueJS watching and reactivity logic for the DOM elements outside the viewport, so that when you scroll back up the elements are still there and you do not spend too much time recreating them (the DOM is slow).
I had to use unexported, private VueJS methods, I raised an issue on Github asking them to provide public hooks but it was declined.
This method works when you have a big but not huge list. In the latter case the bottleneck is not your JS framework but the browser, so yeah, you should delete and create DOM elements on the fly.
(I'd share my code but it's on a commercial app, and a huge hack that I'm surprised I've managed to make work.)
- niftich 10y agoWhat's the relation (if anything) of [1] https://github.com/developerdizzle/react-virtual-list https://github.com/developerdizzle/react-virtual-list to [2] https://github.com/OutSystems/react-virtualized-list https://github.com/OutSystems/react-virtualized-list, who blogged [3] about their component in July 2016? For the GP, the technique itself is older [4][5][6][7], but with this new crop of component-oriented frameworks I can see the value of a dedicated component. [3] https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209 https://medium.com/outsystems-engineering/virtualizing-the-v... [4] http://stackoverflow.com/questions/12613113/ http://stackoverflow.com/questions/12613113/ [5] http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 http://engineering.linkedin.com/linkedin-ipad-5-techniques-s... [6] http://stackoverflow.com/a/12613687 http://stackoverflow.com/a/12613687 [7] https://dannysu.com/2012/07/07/infinite-scroll-memory-optimization/ https://dannysu.com/2012/07/07/infinite-scroll-memory-optimi...
- yourapostasy 10y agoAwesome, thank you, that looks like what I'm asking about, I'll check it out. If I have a straight table, I tend to reach for SlickGrid, but for more free-formatted content, this looks much more useful.