The idea and complete code of front-end virtual list implementation

1. What is a virtual list

Virtual List is a technical solution for optimizing long list performance. The core idea is: only render list items in the visual area, not all items in the entire list. This technology is especially suitable for scenarios where large amounts of data are required to display, which can significantly improve page performance and user experience.

2. Why do you need a virtual list?

Suppose we need to render a list of 10,000 pieces of data:

• Performance issues：

  • Too many DOM nodes will cause slow page rendering
  • Large memory usage
  • Scrolling stutter

• User Experience：

  • Long loading time on the first screen
  • Slow response to the operation
  • The equipment has severe fever

3. Implementation principle of virtual list

1. Core concepts

• Viewport: List area that users can see
• Visual area height: The height of the viewport
• List item height: The height of each list item
• Visual area start index: Index of the first list item in the currently visible area
• Visual area end index: Index of the last list item in the currently visible area
• Offset: The distance from the list scrolling

2. Calculation formula

// Number of list items that can be displayedvisibleCount = (viewportHeight / itemHeight)

// Start indexstartIndex = (scrollTop / itemHeight)

// End indexendIndex = startIndex + visibleCount

// Offsetoffset = scrollTop - (scrollTop % itemHeight)

4. Code implementation

1. Infrastructure

<div class="viewport" @scroll="handleScroll">
  <div class="scroll-list" :style="{ height: totalHeight + 'px' }">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <!-- Rendering area list item -->
    </div>
  </div>
</div>

2. Complete implementation

class VirtualList {
  constructor(options) {
     = ;
     = ;
     = ;
     =  || 5;
    
     = ;
     = ( / );
     = 0;
     =  +  + ;
     = 0;
    
    ();
    ();
  }
  
  initDom() {
     = ('div');
     = 'scroll-list';
     =  *  + 'px';
    
     = ('div');
     = 'scroll-content';
    
    ();
    ();
  }
  
  bindEvents() {
    ('scroll', (this));
  }
  
  handleScroll() {
    const scrollTop = ;
     = (scrollTop / );
     =  +  + ;
     =  * ;
    
    ();
  }
  
  updateContent() {
    const visibleData = ();
     = `translateY(${}px)`;
    // Update list content    (visibleData);
  }
  
  getVisibleData() {
    return (, );
  }
  
  renderData(data) {
    // Render DOM based on data  }
}

5. Optimization skills

1. Use the Buffer Buffer

Additional rendering of list items up and down the visual area can improve the white screen problem when scrolling quickly:

const bufferSize = 5;
startIndex = (0, startIndex - bufferSize);
endIndex = (total, endIndex + bufferSize);

2. Dynamic height processing

For cases where the list item height is not fixed, you can:

• Estimated height
• Cache real height
• Dynamic update location

class DynamicVirtualList {
  constructor() {
     = new Map();
     = 100;
  }
  
  updatePosition() {
    let totalHeight = 0;
    for (let i = 0; i < ; i++) {
      totalHeight += (i);
    }
     = totalHeight;
  }
  
  getItemHeight(index) {
    return (index) || ;
  }
}

3. Anti-shake and throttling

Perform anti-shake and throttling of rolling events to avoid frequent calculations:

function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        (this, arguments);
        timer = null;
      }, delay);
    }
  }
}

handleScroll = throttle(function() {
  // Scrolling logic}, 16);

6. Performance optimization suggestions

• Use transform instead of top：

  • Transform is executed in the synthesis layer, with better performance
  • Avoid reordering

• RAF optimization：

  requestAnimationFrame(() => {
    ();
  });
  

• List item component cache：

  • Use or Vue's keep-alive
  • Avoid unnecessary re-rendering

• Avoid doing a lot of calculations while scrolling：

  • Pre-calculated data
  • Using Web Worker

7. Use scenarios

• Long list rendering
• Infinite scrolling
• Big Data Table
• Timeline
• Chat history

8. Things to note

• Need to set the container height accurately
• Process list item dynamic height
• Consider scrolling to the bottom load more
• Keep scrolling
• Keyboard accessibility

This article introduces in detail the concept, implementation principles and optimization solutions of virtual lists. Mainly including:

• Basic concepts and principles explanations
• Complete code implementation
• Various optimization solutions
• Practical application scenarios
• Things to note

Summarize

This is the end of this article about the implementation of front-end virtual lists. For more related content on front-end virtual lists, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!