0Pricing
Vue Academy · Lesson

Virtual Scrolling for Large Lists

vue-virtual-scroller, RecycleScroller, fixing item height vs variable height rendering.

The Large List Problem

Rendering thousands of DOM nodes is slow and memory-hungry. Virtual scrolling renders only the items currently visible in the viewport, recycling DOM nodes as you scroll.

Installing vue-virtual-scroller

A popular library is vue-virtual-scroller. Install it and import its styles.

npm install vue-virtual-scroller

All lessons in this course

  1. v-memo for Template Memoization
  2. Profiling with Vue DevTools Performance Tab
  3. Virtual Scrolling for Large Lists
  4. Web Workers with Vue
← Back to Vue Academy