Optimizing Large List Rendering: A Guide to Implementing Virtual Lists Using IntersectionObserver

Rendering large datasets in frontend applications often causes performance bottlenecks, such as initial white screens and interaction lag. Virtual lists solve this by only rendering DOM elements currently within the viewport. While traditional implementations rely on scroll event listeners, they suffer from high computational overhead and complex offset calculations, especially with dynamic row heights.

The IntersectionObserver API provides a native, asynchronous solution to monitor element visibility relative to a root container. By instantiating an observer with a callback function and configuration options, developers can efficiently track when list items enter or exit the viewport. The callback receives an array of IntersectionObserverEntry objects, where the intersectionRatio property indicates visibility status.

Implementation involves configuring the observer to target the scroll container, attaching observers to each list row, and dynamically binding or clearing data based on visibility. However, initial rendering may still cause lag if all rows collapse to zero height and simultaneously enter the viewport. This is resolved by assigning a large fixed height to rows initially, allowing them to render sequentially as they scroll into view.

Another edge case occurs during rapid scrolling, where asynchronous callbacks may lag, leaving blank spaces. This is mitigated by configuring the rootMargin property to expand the observation area, triggering data binding slightly before elements actually enter the viewport. Compared to scroll listeners, IntersectionObserver offers superior performance and simpler implementation, though it lacks support in older browsers like IE. For modern web projects, it remains a highly effective approach for building custom virtual lists.

Basic observer setup:

var intersectionObserver = new IntersectionObserver(function(entries) {
  if (entries[0].intersectionRatio <= 0) return;
  loadItems(10);
  console.log('Loaded new items');
});
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

Core implementation logic with height and margin fixes:

let config = {
   root: document.querySelector('.main'),
   rootMargin: '100px 0px',
}
let intersectionObserver = new IntersectionObserver(function(entries) {
   entries.forEach((row)=>{
    if (row.intersectionRatio <= 0) {
    if (!_this.isFirst) {
     row.target.style.height = `${row.target.clientHeight}px`
    }
    _this.uiPeriodList[index].coordList = []
   } else {
    row.target.style.height = ''
    _this.uiPeriodList[index].columnList = _this.periodList[index].columnList
   }
   })
}, config)