Working with large datasets in web applications often leads to a common problem: performance degradation when rendering extensive lists. As the number of DOM elements increases, the application becomes sluggish, consuming excessive memory and providing a poor user experience. This is where virtual scrolling comes in—a technique I’ve implemented across numerous projects to significantly boost performance.
Virtual scrolling works by rendering only the items currently visible in the viewport, rather than the entire list. When users scroll, the visible items are dynamically replaced with new ones, maintaining a small, constant DOM size regardless of the list’s actual length.
Understanding Virtual Scrolling
The core concept of virtual scrolling revolves around creating an illusion of a complete list while only rendering a subset of items. This approach reduces memory usage and speeds up rendering by orders of magnitude when dealing with thousands of items.
Instead of rendering all items, we calculate which items should be visible based on the scroll position and render only those, positioning them correctly to make the scrolling experience seamless.
Basic Implementation
Let’s start with a simple implementation. First, we need a container with a fixed height and overflow set to scroll:
<div id="virtual-scroller" style="height: 400px; overflow-y: auto;">
<!-- Items will be rendered here -->
</div>
Next, we’ll create a JavaScript class to handle the virtual scrolling:
class VirtualScroller {
constructor(container, items, itemHeight) {
this.container = container;
this.items = items;
this.itemHeight = itemHeight;
this.totalHeight = items.length * itemHeight;
this.screenHeight = container.clientHeight;
this.visibleItems = Math.ceil(this.screenHeight / itemHeight) + 2; // +2 for buffer
this.init();
}
init() {
// Create a spacer element to maintain scroll height
this.spacer = document.createElement('div');
this.spacer.style.height = `${this.totalHeight}px`;
this.spacer.style.position = 'relative';
this.container.appendChild(this.spacer);
// Add scroll event listener
this.container.addEventListener('scroll', () => this.onScroll());
// Initial render
this.onScroll();
}
onScroll() {
const scrollTop = this.container.scrollTop;
const startIndex = Math.floor(scrollTop / this.itemHeight);
this.renderItems(startIndex);
}
renderItems(startIndex) {
// Clear existing items
this.spacer.innerHTML = '';
const endIndex = Math.min(startIndex + this.visibleItems, this.items.length);
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.className = 'virtual-item';
item.style.position = 'absolute';
item.style.top = `${i * this.itemHeight}px`;
item.style.height = `${this.itemHeight}px`;
item.style.width = '100%';
item.textContent = this.items[i];
this.spacer.appendChild(item);
}
}
}
// Usage
const container = document.getElementById('virtual-scroller');
const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
new VirtualScroller(container, items, 50);
This basic implementation creates a virtual scroller that renders only visible items while maintaining the proper scroll height through the spacer element.
Optimizing Scroll Performance
The scroll event fires frequently, which can lead to performance issues if we’re not careful. To optimize this, I recommend using throttling or requestAnimationFrame:
onScroll() {
if (this.scrollRAF) {
cancelAnimationFrame(this.scrollRAF);
}
this.scrollRAF = requestAnimationFrame(() => {
const scrollTop = this.container.scrollTop;
const startIndex = Math.floor(scrollTop / this.itemHeight);
this.renderItems(startIndex);
});
}
This ensures smoother scrolling by limiting the rendering operations to the browser’s animation frame rate.
Handling Variable Height Items
One challenge with virtual scrolling is handling items of variable heights. Let’s expand our implementation to accommodate this scenario:
class VariableHeightVirtualScroller {
constructor(container, items, estimator) {
this.container = container;
this.items = items;
this.estimator = estimator; // Function to estimate item height
this.positions = [];
this.screenHeight = container.clientHeight;
this.calculatePositions();
this.init();
}
calculatePositions() {
this.positions = [];
let currentPosition = 0;
for (let i = 0; i < this.items.length; i++) {
const height = this.estimator(this.items[i], i);
this.positions.push({
index: i,
height,
start: currentPosition,
end: currentPosition + height
});
currentPosition += height;
}
this.totalHeight = currentPosition;
}
init() {
this.spacer = document.createElement('div');
this.spacer.style.height = `${this.totalHeight}px`;
this.spacer.style.position = 'relative';
this.container.appendChild(this.spacer);
this.container.addEventListener('scroll', () => this.onScroll());
this.onScroll();
}
findVisibleItems(scrollTop) {
const visibleStart = scrollTop;
const visibleEnd = scrollTop + this.screenHeight;
let startIndex = 0;
let endIndex = this.positions.length - 1;
// Binary search for start index
let start = 0;
let end = this.positions.length - 1;
while (start <= end) {
const mid = Math.floor((start + end) / 2);
if (this.positions[mid].end < visibleStart) {
start = mid + 1;
} else {
end = mid - 1;
}
}
startIndex = start;
// Binary search for end index
start = 0;
end = this.positions.length - 1;
while (start <= end) {
const mid = Math.floor((start + end) / 2);
if (this.positions[mid].start <= visibleEnd) {
start = mid + 1;
} else {
end = mid - 1;
}
}
endIndex = end;
// Add buffer items
startIndex = Math.max(0, startIndex - 2);
endIndex = Math.min(this.positions.length - 1, endIndex + 2);
return { startIndex, endIndex };
}
onScroll() {
if (this.scrollRAF) {
cancelAnimationFrame(this.scrollRAF);
}
this.scrollRAF = requestAnimationFrame(() => {
const scrollTop = this.container.scrollTop;
const { startIndex, endIndex } = this.findVisibleItems(scrollTop);
this.renderItems(startIndex, endIndex);
});
}
renderItems(startIndex, endIndex) {
this.spacer.innerHTML = '';
for (let i = startIndex; i <= endIndex; i++) {
const { index, start, height } = this.positions[i];
const item = document.createElement('div');
item.className = 'virtual-item';
item.style.position = 'absolute';
item.style.top = `${start}px`;
item.style.height = `${height}px`;
item.style.width = '100%';
item.textContent = this.items[index];
this.spacer.appendChild(item);
}
}
}
// Usage
const container = document.getElementById('virtual-scroller');
const items = Array.from({ length: 10000 }, (_, i) => ({
id: i,
text: `Item ${i + 1}`,
size: Math.random() > 0.8 ? 'large' : 'normal'
}));
const estimator = (item) => item.size === 'large' ? 100 : 50;
new VariableHeightVirtualScroller(container, items, estimator);
This implementation uses a more complex algorithm to track item positions and employs binary search to efficiently find visible items.
Measuring Actual Heights Dynamically
For more accuracy, we can measure the actual heights of items after rendering:
renderItems(startIndex, endIndex) {
this.spacer.innerHTML = '';
const fragments = [];
for (let i = startIndex; i <= endIndex; i++) {
const { index, start, height } = this.positions[i];
const item = document.createElement('div');
item.className = 'virtual-item';
item.style.position = 'absolute';
item.style.top = `${start}px`;
item.style.width = '100%';
item.textContent = this.items[index];
item.dataset.index = index;
this.spacer.appendChild(item);
fragments.push({ element: item, index, originalHeight: height });
}
// Measure actual heights after DOM update
requestAnimationFrame(() => {
let needsUpdate = false;
fragments.forEach(({ element, index, originalHeight }) => {
const actualHeight = element.offsetHeight;
if (Math.abs(actualHeight - originalHeight) > 1) {
needsUpdate = true;
this.positions[index].height = actualHeight;
}
});
if (needsUpdate) {
this.recalculatePositions(startIndex);
this.updateItemPositions();
}
});
}
recalculatePositions(fromIndex) {
let currentPosition = fromIndex === 0 ? 0 : this.positions[fromIndex - 1].end;
for (let i = fromIndex; i < this.positions.length; i++) {
this.positions[i].start = currentPosition;
this.positions[i].end = currentPosition + this.positions[i].height;
currentPosition = this.positions[i].end;
}
this.totalHeight = currentPosition;
this.spacer.style.height = `${this.totalHeight}px`;
}
updateItemPositions() {
const items = this.spacer.querySelectorAll('.virtual-item');
items.forEach(item => {
const index = parseInt(item.dataset.index, 10);
item.style.top = `${this.positions[index].start}px`;
});
}
This approach ensures accurate positioning even when the actual rendered height differs from our estimate.
Integration with React
Virtual scrolling integrates well with React. Here’s a simple implementation:
import React, { useState, useEffect, useRef } from 'react';
function VirtualList({ items, itemHeight, containerHeight }) {
const containerRef = useRef(null);
const [scrollTop, setScrollTop] = useState(0);
const [visibleItems, setVisibleItems] = useState([]);
const totalHeight = items.length * itemHeight;
const visibleItemCount = Math.ceil(containerHeight / itemHeight) + 2;
useEffect(() => {
const container = containerRef.current;
if (!container) return;
const handleScroll = () => {
setScrollTop(container.scrollTop);
};
container.addEventListener('scroll', handleScroll);
return () => container.removeEventListener('scroll', handleScroll);
}, []);
useEffect(() => {
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(startIndex + visibleItemCount, items.length);
const visibleData = [];
for (let i = startIndex; i < endIndex; i++) {
visibleData.push({
index: i,
item: items[i],
style: {
position: 'absolute',
top: `${i * itemHeight}px`,
height: `${itemHeight}px`,
width: '100%'
}
});
}
setVisibleItems(visibleData);
}, [scrollTop, items, itemHeight, visibleItemCount]);
return (
<div
ref={containerRef}
style={{
height: `${containerHeight}px`,
overflow: 'auto',
position: 'relative'
}}
>
<div style={{ height: `${totalHeight}px`, position: 'relative' }}>
{visibleItems.map(({ index, item, style }) => (
<div key={index} style={style}>
{item}
</div>
))}
</div>
</div>
);
}
export default VirtualList;
Angular Integration
Here’s how to implement virtual scrolling in Angular:
import { Component, Input, ElementRef, ViewChild, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-virtual-scroller',
template: `
<div
#container
class="virtual-scroller"
[style.height.px]="containerHeight"
(scroll)="onScroll()">
<div [style.height.px]="totalHeight" class="scroller-spacer">
<div
*ngFor="let itemData of visibleItems"
class="virtual-item"
[style.transform]="'translateY(' + itemData.top + 'px)'"
[style.height.px]="itemHeight">
{{ itemData.item }}
</div>
</div>
</div>
`,
styles: [`
.virtual-scroller {
overflow-y: auto;
position: relative;
}
.scroller-spacer {
position: relative;
}
.virtual-item {
position: absolute;
width: 100%;
}
`]
})
export class VirtualScrollerComponent implements OnInit, AfterViewInit {
@Input() items: any[] = [];
@Input() itemHeight: number = 50;
@Input() containerHeight: number = 400;
@ViewChild('container') containerRef!: ElementRef;
visibleItems: { item: any, top: number }[] = [];
totalHeight: number = 0;
scrollTop: number = 0;
visibleItemCount: number = 0;
ngOnInit() {
this.totalHeight = this.items.length * this.itemHeight;
this.visibleItemCount = Math.ceil(this.containerHeight / this.itemHeight) + 2;
this.updateVisibleItems();
}
ngAfterViewInit() {
this.updateVisibleItems();
}
onScroll() {
this.scrollTop = this.containerRef.nativeElement.scrollTop;
this.updateVisibleItems();
}
updateVisibleItems() {
const startIndex = Math.floor(this.scrollTop / this.itemHeight);
const endIndex = Math.min(startIndex + this.visibleItemCount, this.items.length);
this.visibleItems = [];
for (let i = startIndex; i < endIndex; i++) {
this.visibleItems.push({
item: this.items[i],
top: i * this.itemHeight
});
}
}
}
Vue.js Implementation
Here’s a Vue.js component for virtual scrolling:
<template>
<div
ref="container"
class="virtual-scroller"
:style="{ height: containerHeight + 'px' }"
@scroll="onScroll">
<div
class="scroller-spacer"
:style="{ height: totalHeight + 'px' }">
<div
v-for="item in visibleItems"
:key="item.index"
class="virtual-item"
:style="{
transform: `translateY(${item.top}px)`,
height: itemHeight + 'px'
}">
{{ item.content }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
},
itemHeight: {
type: Number,
default: 50
},
containerHeight: {
type: Number,
default: 400
}
},
data() {
return {
visibleItems: [],
scrollTop: 0,
};
},
computed: {
totalHeight() {
return this.items.length * this.itemHeight;
},
visibleItemCount() {
return Math.ceil(this.containerHeight / this.itemHeight) + 2;
}
},
mounted() {
this.updateVisibleItems();
},
methods: {
onScroll() {
this.scrollTop = this.$refs.container.scrollTop;
this.updateVisibleItems();
},
updateVisibleItems() {
const startIndex = Math.floor(this.scrollTop / this.itemHeight);
const endIndex = Math.min(startIndex + this.visibleItemCount, this.items.length);
this.visibleItems = [];
for (let i = startIndex; i < endIndex; i++) {
this.visibleItems.push({
index: i,
content: this.items[i],
top: i * this.itemHeight
});
}
}
}
};
</script>
<style scoped>
.virtual-scroller {
overflow-y: auto;
position: relative;
}
.scroller-spacer {
position: relative;
}
.virtual-item {
position: absolute;
width: 100%;
}
</style>
Accessibility Considerations
Accessibility is often overlooked in virtual scrolling implementations. Here are some important considerations:
class AccessibleVirtualScroller extends VirtualScroller {
constructor(container, items, itemHeight) {
super(container, items, itemHeight);
this.setupAccessibility();
}
setupAccessibility() {
// Make the container focusable
this.container.tabIndex = 0;
// Add ARIA attributes
this.container.setAttribute('role', 'list');
this.container.setAttribute('aria-label', 'Virtual scrolling list');
// Add keyboard navigation
this.container.addEventListener('keydown', this.handleKeyDown.bind(this));
}
handleKeyDown(event) {
let newScrollTop = this.container.scrollTop;
switch(event.key) {
case 'ArrowDown':
newScrollTop += this.itemHeight;
event.preventDefault();
break;
case 'ArrowUp':
newScrollTop -= this.itemHeight;
event.preventDefault();
break;
case 'PageDown':
newScrollTop += this.screenHeight;
event.preventDefault();
break;
case 'PageUp':
newScrollTop -= this.screenHeight;
event.preventDefault();
break;
case 'Home':
newScrollTop = 0;
event.preventDefault();
break;
case 'End':
newScrollTop = this.totalHeight - this.screenHeight;
event.preventDefault();
break;
}
this.container.scrollTop = Math.max(0, Math.min(newScrollTop, this.totalHeight - this.screenHeight));
}
renderItems(startIndex) {
// Clear existing items
this.spacer.innerHTML = '';
const endIndex = Math.min(startIndex + this.visibleItems, this.items.length);
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.className = 'virtual-item';
item.style.position = 'absolute';
item.style.top = `${i * this.itemHeight}px`;
item.style.height = `${this.itemHeight}px`;
item.style.width = '100%';
// Add accessibility attributes
item.setAttribute('role', 'listitem');
item.setAttribute('aria-posinset', i + 1);
item.setAttribute('aria-setsize', this.items.length);
item.textContent = this.items[i];
this.spacer.appendChild(item);
}
}
}
These additions ensure keyboard navigation and proper screen reader announcements.
Performance Optimizations
To squeeze every bit of performance from our virtual scroller, consider these optimizations:
- DOM Recycling: Instead of creating new DOM elements on each render, reuse existing ones:
class RecyclingVirtualScroller extends VirtualScroller {
constructor(container, items, itemHeight) {
super(container, items, itemHeight);
this.nodePool = [];
}
getOrCreateNode() {
if (this.nodePool.length > 0) {
return this.nodePool.pop();
}
const node = document.createElement('div');
node.className = 'virtual-item';
node.style.position = 'absolute';
node.style.width = '100%';
return node;
}
renderItems(startIndex) {
const endIndex = Math.min(startIndex + this.visibleItems, this.items.length);
// Store current nodes for recycling
const currentNodes = Array.from(this.spacer.children);
// Clear the container without destroying nodes
while (this.spacer.firstChild) {
const node = this.spacer.firstChild;
this.spacer.removeChild(node);
this.nodePool.push(node);
}
for (let i = startIndex; i < endIndex; i++) {
const node = this.getOrCreateNode();
node.style.top = `${i * this.itemHeight}px`;
node.style.height = `${this.itemHeight}px`;
node.textContent = this.items[i];
this.spacer.appendChild(node);
}
}
}
- Debouncing Window Resize: Update calculations when the window resizes, but use debouncing to avoid excessive recalculations:
constructor(container, items, itemHeight) {
// ... other initialization code
this.resizeObserver = new ResizeObserver(this.debounce(this.onResize.bind(this), 150));
this.resizeObserver.observe(container);
}
debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
onResize() {
this.screenHeight = this.container.clientHeight;
this.visibleItems = Math.ceil(this.screenHeight / this.itemHeight) + 2;
this.onScroll();
}
// Don't forget to clean up
destroy() {
this.container.removeEventListener('scroll', this.onScroll);
this.resizeObserver.disconnect();
}
Real-world Applications
I’ve used virtual scrolling in various scenarios, including:
- Data tables with thousands of rows
- Infinite-scrolling social media feeds
- Logs and audit trails with extensive entries
- Chat applications with long conversation histories
- Product catalogs with thousands of items
The performance improvements are substantial. In one project, we reduced initial render time from over 5 seconds to under 100ms for a list with 10,000 items, while maintaining smooth 60fps scrolling.
Conclusion
Implementing virtual scrolling is an essential technique for handling large datasets in web applications. By rendering only what’s visible, we can create highly responsive interfaces even when working with thousands or millions of items.
The implementations provided here offer a solid foundation that you can adapt to your specific needs. Whether you’re working with React, Angular, Vue, or vanilla JavaScript, these techniques will help you deliver exceptional performance.
Remember to consider accessibility, correctly handle variable-height items, and use proper memory management techniques like DOM recycling for the best results. With these approaches, you can build web applications that maintain their responsiveness and provide a great user experience regardless of the amount of data they need to display.
