Rendering thousands of items naively causes significant JavaScript and layout overhead, leading to an unresponsive UI during re-renders.
Websites like Google use traditional pagination, while others like Facebook and Unsplash use infinite scroll and skeleton loaders to manage large datasets.
Virtual scroll, also known as windowing, creates a smooth user experience by only rendering the items currently visible in the viewport.
Before choosing a library, consider its limitations regarding scroll restoration, deep linking, dynamic heights, and window-level scrolling.
Implementing virtual scroll requires calculating the total container height and the position of visible items, which is complicated by dynamic row heights.
The Intersection Observer API enables an alternative approach where lightweight skeleton placeholders are replaced with full content as they enter the viewport.
Improve scrolling smoothness by throttling scroll events, tuning the render-ahead buffer, minimizing re-renders, and simplifying complex list items.
The speaker addresses when to choose pagination over virtual scroll and how to apply these performance techniques to tables and tree structures.
14:44Chris Heilmann
21:35Eliran Natan
27:01Shem Magnezi
43:11Jeremy Keith
40:24Clemens Helm
30:40André Kovac
46:46Chris Ferdinandi
30:07Julia Undeutsch
.png?w=240&auto=compress,format)
Jobs that call for the skills explored in this talk.
doinstruct Software GmbH
Berlin, Germany
tarent solutions GmbH
tarent solutions GmbH
tarent solutions GmbH
Vesterling Consulting GmbH
Köln, Germany
Optimi Solutions GmbH
Smartclip
Berlin, Germany