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.
Sensory-Minds GmbH
Offenbach am Main, Germany
Hubert Burda Media
München, Germany
14:44Chris Heilmann
21:35Eliran Natan
40:24Clemens Helm
27:01Shem Magnezi
43:11Jeremy Keith
30:40André Kovac
46:46Chris Ferdinandi
30:07Julia Undeutsch
Jobs that call for the skills explored in this talk.
Turboneer LLC
Mount Morris, United States of America
Lightspeed Commerce
Berlin, Germany
Horizontal Talent
Saint Paul, United States of America
