虚拟列表白屏优化性能提升🆙绝地反击

2023-06-27 00:35:58

虚拟列表：高效展示大量数据

在构建现代 Web 应用程序时，我们经常需要处理海量数据，例如商品列表或社交动态流。有效展示这些数据至关重要，而虚拟列表技术应运而生。

虚拟列表的原理是只渲染当前可见区域的数据，其余数据则暂时隐藏。当用户滚动列表时，再动态加载并渲染新的数据。这种机制大大减少了渲染数据量，提升了渲染速度和内存效率，避免了列表滚动卡顿和白屏现象。

目前，主流前端框架均提供虚拟列表的实现，例如 React 中的 react-virtualized、Vue 中的 vue-virtual-scroller 和 Angular 中的 ngx-virtual-scroll。

示例代码：

import { useVirtualList } from 'react-virtualized';

const VirtualizedList = () => {
  const data = Array.from({ length: 10000 }, (_, i) => i);
  const { rows, scrollToIndex } = useVirtualList({
    data,
    height: 300,
    rowHeight: 30,
  });

  return (
    <div className="virtualized-list">
      {rows.map(({ index, style }) => (
        <div key={index} style={style}>
          Item {index}
        </div>
      ))}
    </div>
  );
};

export default VirtualizedList;

优势：

减少渲染数据量，提高渲染速度
降低内存使用，防止卡顿
提升用户体验，让滚动更加流畅

白屏：列表滚动时空白区域

白屏是指列表滚动时出现短暂的空白区域，原因包括：

数据加载慢： 数据加载速度跟不上滚动速度，导致空白区域。
渲染速度慢： 渲染速度跟不上滚动速度，导致空白区域。
滚动速度太快： 滚动速度过快，导致空白区域。

优化建议：

优化数据加载速度： 使用 CDN、缓存等技术提高数据加载速度。
优化渲染速度： 使用虚拟列表、优化列表结构等技术提升渲染速度。
控制滚动速度： 使用节流、防抖等技术控制滚动速度。

示例代码：

// 使用节流函数来控制滚动速度
const throttle = (func, wait) => {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime > wait) {
      func(...args);
      lastTime = now;
    }
  };
};

// 在列表滚动时使用节流函数
const onScroll = throttle(() => {
  // 加载更多数据
}, 100);