Virtual scrolling for large lists in Angular - 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 instead of the entire large list.

Displaying a large list of items in a scrollable container

Angular

import { Component } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@Component({
  selector: 'app-virtual-list',
  template: `<cdk-virtual-scroll-viewport itemSize="40" style="height:400px;">
    <div *cdkVirtualFor="let item of items">{{item}}</div>
  </cdk-virtual-scroll-viewport>`
})
export class VirtualListComponent {
  items = Array.from({length: 10000}, (_, i) => `Item ${i + 1}`);
}

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

📈 Performance GainTriggers about 10-20 reflows instead of 10,000, improving LCP and reducing memory use.

Displaying a large list of items in a scrollable container

Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-large-list',
  template: `<div style='height:400px; overflow:auto;'>
    <div *ngFor='let item of items'>{{item}}</div>
  </div>`
})
export class LargeListComponent {
  items = Array.from({length: 10000}, (_, i) => `Item ${i + 1}`);
}

Renders all 10,000 items at once, creating a huge DOM tree and causing slow initial load and heavy memory use.

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

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Rendering full list	10,000 nodes created	10,000 reflows	High paint cost	[X] Bad
Virtual scrolling	20-30 nodes created	20 reflows	Low paint cost	[OK] Good

Rendering Pipeline

Virtual scrolling limits the number of DOM nodes by rendering only visible items. This reduces the work in Style Calculation, Layout, and Paint stages.

→Layout

→Paint

→Composite

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

Core Web Vital Affected

LCP

Virtual scrolling improves page load speed and rendering performance by only rendering visible list items instead of the entire large list.

Optimization Tips

1Render only visible list items to reduce DOM size.

2Use Angular CDK virtual scroll for efficient large lists.

3Avoid rendering thousands of elements at once to prevent layout thrashing.

Performance Quiz - 3 Questions

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

A Rendering only visible items reduces DOM size and speeds up rendering

B It preloads all items to avoid delays during scrolling

C It uses CSS animations to improve scrolling smoothness

D It caches all list items in memory for faster access

DevTools: Performance

How to check: Record a performance profile while scrolling the list. Observe the number of layout and paint events triggered.

What to look for: Look for fewer layout recalculations and shorter long tasks indicating smoother scrolling and faster rendering.