Optimize Infinite Scroll Performance in JavaScript

Question

You’re implementing infinite scroll.
After loading hundreds of items, the UI starts lagging.
How do you fix this?

Solution 1: Use IntersectionObserver

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) loadMoreData();
});
observer.observe(document.querySelector('#load-trigger'));

Solution 2: Virtualized Rendering (Render Window)

const visibleItems = allItems.slice(startIndex, endIndex);
visibleItems.forEach(renderItem);

Render only items visible in the viewport.

Visualization

graph TD
A[Data List 1000 Items] -->|Render Only 20| B[Viewport]
B --> C[Load More When Bottom Visible]
C --> D[Recycle DOM Nodes ♻️]

Summary

• Use IntersectionObserver for scroll triggers
• Virtualization to limit DOM size
• Avoid keeping thousands of DOM nodes
• Combine batching + throttling for smooth infinite scroll