虚拟列表与大数据渲染：从原理到实现取舍

总高度    = 行高 × 总行数            （撑出滚动条）
起始下标  = floor(scrollTop / 行高)   （当前视口顶部对应第几行）
可见行数  = ceil(容器高度 / 行高)      （视口能装下几行）
渲染范围  = [起始下标 - overscan, 起始下标 + 可见行数 + overscan]

interface VirtualListOptions {
  rowHeight: number;    // 固定行高（px）
  overscan?: number;    // 视口外多渲染的行数，快速滚动时的缓冲
}

function createVirtualList(container: HTMLElement, options: VirtualListOptions) {
  const { rowHeight, overscan = 5 } = options;
  const viewport = document.createElement('div'); // 可视区：overflow auto
  const spacer = document.createElement('div');  // 占位：撑出总高度
  const track = document.createElement('div');   // 行容器：整体 translateY

  viewport.style.overflow = 'auto';
  viewport.appendChild(track);
  container.appendChild(spacer);
  container.appendChild(viewport);

  let items: unknown[] = [];
  let startIndex = 0;
  let endIndex = 0;
  let rafId = 0;

  function render(): void {
    const total = items.length;
    spacer.style.height = `${total * rowHeight}px`;      // 总高度
    const scrollTop = viewport.scrollTop;
    const first = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
    const visible = Math.ceil(viewport.clientHeight / rowHeight) + overscan * 2;
    if (first === startIndex && first + visible === endIndex) return; // 范围没变不重渲
    startIndex = first;
    endIndex = first + visible;

    track.style.transform = `translateY(${startIndex * rowHeight}px)`;
    track.innerHTML = '';                                // 实际项目用增量 diff 或框架渲染
    for (let i = startIndex; i < Math.min(endIndex, total); i++) {
      track.appendChild(renderRow(items[i], i));         // renderRow 由业务提供
    }
  }

  viewport.addEventListener(
    'scroll',
    () => {
      cancelAnimationFrame(rafId);                      // 每帧最多重算一次
      rafId = requestAnimationFrame(render);
    },
    { passive: true }                                    // 不 preventDefault，passive 提升滚动性能
  );

  return {
    setItems(next: unknown[]): void {
      items = next;
      viewport.scrollTop = 0;                           // 数据源整体更换，滚回顶部
      render();
    },
    scrollToIndex(index: number): void {
      viewport.scrollTop = index * rowHeight;
    },
  };
}

class DynamicRowCache {
  private heights: number[] = [];   // 每行已测量的真实高度
  private offsets: number[] = [0];  // 前缀和：offsets[i] = 前 i 行总高度
  private estimated: number;         // 未测量行的估算高度

  /** 二分查找：给定 scrollTop 找到起始行 */
  findStartIndex(scrollTop: number, total: number): number {
    let lo = 0, hi = total - 1;
    while (lo < hi) {
      const mid = (lo + hi) >> 1;
      if (this.offsetOf(mid + 1) <= scrollTop) lo = mid + 1;
      else hi = mid;
    }
    return lo;
  }

  /** 未测量的行按估算高度兜底，保证滚动条长度始终有值 */
  offsetOf(index: number): number {
    return index < this.offsets.length
      ? this.offsets[index]
      : this.offsets[this.offsets.length - 1] + (index - (this.offsets.length - 1)) * this.estimated;
  }

  /** 渲染后回填真实高度，修正 offsets，并触发一次校正渲染 */
  measure(index: number, height: number): boolean {
    if (Math.abs(this.heights[index] - height) < 0.5) return false;
    this.heights[index] = height;
    this.rebuildOffsets();
    return true; // 返回 true 时调用方应重算可视范围
  }

  private rebuildOffsets(): void {
    this.offsets = [0];
    for (let i = 0; i < this.heights.length; i++) {
      this.offsets.push(this.offsets[i] + this.heights[i]);
    }
  }
}

/* 占位行：与真实行高一致，避免占位与真实内容切换时再跳一次 */
.row-placeholder {
  height: var(--row-estimated-height);
  background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 50%, #f2f2f2 75%);
  animation: row-sheen 1.2s infinite;
}

@keyframes row-sheen {
  from { background-position: -200px 0; }
  to { background-position: 200px 0; }
}