Virtual scrolling for large lists in Vue - Performance & Optimization

Performance: Virtual scrolling for large lists

HIGH IMPACT

Virtual scrolling improves page load speed and rendering performance by only rendering visible list items, reducing DOM size and layout calculations.

Rendering a large list of items efficiently

Vue

<template>
  <div ref="scrollContainer" style="height: 400px; overflow-y: auto;">
    <div :style="{ height: totalHeight + 'px', position: 'relative' }">
      <div
        v-for="item in visibleItems"
        :key="item.id"
        :style="{ position: 'absolute', top: itemPositions[item.id] + 'px', height: itemHeight + 'px', width: '100%' }"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }))
const itemHeight = 30
const scrollTop = ref(0)
const containerHeight = 400

const visibleCount = Math.ceil(containerHeight / itemHeight) + 1

const visibleItems = computed(() => {
  const startIndex = Math.floor(scrollTop.value / itemHeight)
  return items.slice(startIndex, startIndex + visibleCount)
})

const itemPositions = {}
items.forEach((item, index) => {
  itemPositions[item.id] = index * itemHeight
})

const totalHeight = items.length * itemHeight

const scrollContainer = ref(null)

function onScroll() {
  scrollTop.value = scrollContainer.value.scrollTop
}

onMounted(() => {
  scrollContainer.value.addEventListener('scroll', onScroll)
})

onUnmounted(() => {
  scrollContainer.value.removeEventListener('scroll', onScroll)
})
</script>

Only renders visible items plus a small buffer, drastically reducing DOM nodes and layout work.

📈 Performance GainTriggers ~15 reflows and paints instead of 10,000, improving load time and responsiveness.

Rendering a large list of items efficiently

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }))
</script>

Rendering all 10,000 items at once creates a huge DOM tree, causing slow initial load and heavy layout calculations.

📉 Performance CostTriggers 10,000 reflows and paints, blocking rendering for hundreds of milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Render all items	10,000 nodes created	10,000 reflows	High paint cost	[X] Bad
Virtual scrolling	~15 nodes created	~15 reflows	Low paint cost	[OK] Good

Rendering Pipeline

Virtual scrolling limits the number of DOM nodes created and updated, reducing the work in Style Calculation, Layout, and Paint stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive due to fewer elements needing size and position calculations.

Core Web Vital Affected

LCP

Virtual scrolling improves page load speed and rendering performance by only rendering visible list items, reducing DOM size and layout calculations.

Optimization Tips

1Render only visible list items to keep DOM size small.

2Use fixed item heights or calculate positions to avoid layout thrashing.

3Listen to scroll events efficiently to update visible items without blocking rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of virtual scrolling in large lists?

A Loading all items at once to cache them

B Rendering only visible items to reduce DOM size and layout work

C Using CSS animations on all list items

D Increasing font size for better readability

DevTools: Performance

How to check: Record a performance profile while scrolling the list. Look for long tasks and layout recalculations.

What to look for: Check for reduced layout and paint times and fewer DOM nodes in the Elements panel.

Practice

1. What is the main purpose of virtual scrolling in Vue applications when displaying large lists?

easy

A. To sort the list items automatically

B. To render only visible items to improve performance

C. To disable scrolling for better user control

D. To load all items at once for faster access

Solution

1. Step 1: Understand virtual scrolling concept

   Virtual scrolling renders only the visible portion of a large list instead of all items at once.

2. Step 2: Identify the benefit in Vue apps

   This reduces rendering load and improves performance when dealing with many items.

3. Final Answer:

   To render only visible items to improve performance -> Option B

4. Quick Check:

   Virtual scrolling = Render visible items only [OK]

Hint: Virtual scrolling shows visible items only to boost speed [OK]

Common Mistakes:

• Thinking it loads all items at once
• Believing it disables scrolling
• Assuming it sorts items automatically

2. Which Vue template snippet correctly sets up a container for virtual scrolling with fixed height and overflow?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify container style for virtual scrolling

   The container must have a fixed height and vertical scrolling enabled (overflow-y: auto).

2. Step 2: Match the correct style snippet

   <div style="height: 300px; overflow-y: auto;"></div> sets height to 300px and overflow-y to auto, enabling vertical scroll inside fixed height.

3. Final Answer:

   <div style="height: 300px; overflow-y: auto;"></div> -> Option A

4. Quick Check:

   Fixed height + vertical scroll = <div style="height: 300px; overflow-y: auto;"></div> [OK]

Hint: Fixed height + overflow-y:auto enables virtual scroll container [OK]

Common Mistakes:

• Using overflow-x instead of overflow-y
• Setting height to auto instead of fixed
• Using position fixed incorrectly

3. Given this Vue code snippet for virtual scrolling, what will be rendered when scrollTop is 200, itemHeight is 50, and visibleCount is 10?

const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;
const visibleItems = items.slice(startIndex, endIndex);

medium

A. Items from index 4 to 13

B. Items from index 0 to 4

C. Items from index 200 to 250

D. Items from index 50 to 100

Solution

1. Step 1: Calculate startIndex from scrollTop and itemHeight

   startIndex = floor(200 / 50) = 4.

2. Step 2: Determine endIndex using visibleCount (assume 10)

   endIndex = 4 + 10 = 14, so slice is items[4..13].

3. Final Answer:

   Items from index 4 to 13 -> Option A

4. Quick Check:

   startIndex = 4, endIndex = 14 slice = 4 to 13 [OK]

Hint: Divide scrollTop by itemHeight for start index [OK]

Common Mistakes:

• Using scrollTop directly as index
• Confusing endIndex with startIndex
• Ignoring floor function

4. Identify the bug in this Vue virtual scrolling code snippet:

const startIndex = Math.ceil(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;
const visibleItems = items.slice(startIndex, endIndex);

medium

A. Missing reactive state for scrollTop

B. Using slice instead of splice causes mutation

C. Incorrect calculation of endIndex

D. Using Math.ceil causes skipping the first visible item

Solution

1. Step 1: Analyze use of Math.ceil for startIndex

   Math.ceil rounds up, so if scrollTop/itemHeight is exactly 4, startIndex becomes 4, but if 3.1 it becomes 4, skipping some items.

2. Step 2: Understand impact on visible items

   This causes the first partially visible item to be skipped, leading to missing items during scroll.

3. Final Answer:

   Using Math.ceil causes skipping the first visible item -> Option D

4. Quick Check:

   Math.ceil skips partially visible items [OK]

Hint: Use Math.floor, not Math.ceil, for start index [OK]

Common Mistakes:

• Confusing slice with splice
• Ignoring reactive state importance
• Miscalculating endIndex

5. You want to implement virtual scrolling for a list of 10,000 items in Vue 3 using the Composition API. Which approach best ensures smooth scrolling and correct item rendering?

hard

A. Render all 10,000 items inside a scrollable div and rely on browser optimization

B. Use v-if to render only the first 100 items regardless of scroll position

C. Use a fixed height container with overflow-y:auto, calculate visible items on scroll, and absolutely position items inside a tall wrapper

D. Use a dynamic height container that grows as user scrolls down

Solution

1. Step 1: Understand virtual scrolling requirements

   Virtual scrolling needs a fixed height container with scroll enabled and dynamic rendering of visible items.

2. Step 2: Identify correct rendering technique

   Absolutely positioning items inside a tall wrapper simulates full list height while rendering only visible items improves performance.

3. Step 3: Evaluate other options

   Rendering all items or ignoring scroll position causes lag; dynamic height container breaks scroll behavior.

4. Final Answer:

   Use a fixed height container with overflow-y:auto, calculate visible items on scroll, and absolutely position items inside a tall wrapper -> Option C

5. Quick Check:

   Fixed container + dynamic visible items + absolute positioning = Use a fixed height container with overflow-y:auto, calculate visible items on scroll, and absolutely position items inside a tall wrapper [OK]

Hint: Fixed height + absolute positioning + scroll event = smooth virtual scroll [OK]

Common Mistakes:

• Rendering all items causing slow UI
• Ignoring scroll position for rendering
• Using dynamic height container breaking scroll