3.3 虚拟滚动深度实现 - 深度剖析

实现虚拟滚动组件,优化大数据列表渲染性能
- 基于虚拟滚动技术,实现万级数据列表的流畅渲染,帧率稳定 60fps
- 支持动态高度、双向滚动、无限加载等复杂场景
- 优化首屏渲染时间,10000 条数据首屏从 5s 降至 300ms

从零实现高性能虚拟滚动引擎,支持百万级数据渲染
- 设计动态高度计算算法,通过二分查找和缓存策略,查询性能从 O(n) 优化到 O(log n)
- 实现二维虚拟化(虚拟表格),同时优化行列渲染,大表格滚动帧率提升 5 倍
- 通过 requestIdleCallback 分片渲染,避免长任务阻塞主线程,交互响应性提升 80%
- 解决滚动锚点定位、快速滚动白屏、高度抖动等 10+ 个技术难点

主导虚拟化渲染架构设计,建立性能优化方法论
- 抽象虚拟化核心算法,支持列表、表格、瀑布流等多种布局模式
- 建立渲染性能监控体系,识别性能瓶颈并自动优化,长列表 FPS 提升 3 倍
- 设计渐进式渲染策略,首屏内容优先,非关键内容延迟渲染,LCP 降低 60%

scrollTop + clientHeight >= scrollHeight - threshold

heightCache = new Map([
  [0, 120],  // 第 0 个元素高度 120px
  [1, 80],   // 第 1 个元素高度 80px
  [2, 150],  // 第 2 个元素高度 150px
])

offsetCache = [
  0,    // 第 0 个元素顶部位置
  120,  // 第 1 个元素顶部位置
  200,  // 第 2 个元素顶部位置
  350,  // 第 3 个元素顶部位置
]

滚动前:
- 第 10 个元素在可视区域顶部
- 相对容器顶部偏移 50px
- scrollTop = 1000px

第 5 个元素高度从预估 80px 变成实际 200px,差了 120px

滚动后:
- 第 10 个元素的位置变了,从 1000px 变成 1120px
- 为了保持视觉位置,scrollTop 也要加 120px
- 新的 scrollTop = 1120px

function renderInChunks(items, chunkSize = 50) {
  let index = 0

  function renderChunk(deadline) {
    while (index < items.length && deadline.timeRemaining() > 0) {
      const endIndex = Math.min(index + chunkSize, items.length)
      const chunk = items.slice(index, endIndex)

      // 渲染这一批
      renderItems(chunk)

      index = endIndex
    }

    if (index < items.length) {
      requestIdleCallback(renderChunk)
    }
  }

  requestIdleCallback(renderChunk)
}

<!-- components/VirtualList/VirtualList.vue -->
<template>
  <div
    ref="containerRef"
    class="virtual-list"
    :style="{ height: `${height}px`, overflow: 'auto' }"
    @scroll="handleScroll"
  >
    <!-- 占位元素,撑起总高度 -->
    <div :style="{ height: `${totalHeight}px`, position: 'relative' }">
      <!-- 可见元素 -->
      <div
        v-for="item in visibleItems"
        :key="getItemKey(item)"
        :ref="el => setItemRef(el, item)"
        :style="{
          position: 'absolute',
          top: `${getItemOffset(item.index)}px`,
          width: '100%',
        }"
      >
        <slot :item="item.data" :index="item.index"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  // 数据列表
  items: {
    type: Array,
    required: true,
  },
  // 容器高度
  height: {
    type: Number,
    required: true,
  },
  // 预估每项高度
  estimatedItemHeight: {
    type: Number,
    default: 50,
  },
  // 缓冲区项数
  overscan: {
    type: Number,
    default: 5,
  },
  // 获取项的唯一 key
  itemKey: {
    type: [String, Function],
    default: 'id',
  },
})

const containerRef = ref()

// 滚动位置
const scrollTop = ref(0)

// 高度缓存
const heightCache = new Map()

// 累计高度缓存
const offsetCache = ref([0])

// 元素引用 Map
const itemRefs = new Map()

// 总高度
const totalHeight = computed(() => {
  return getItemOffset(props.items.length)
})

// 可见区域的起始和结束索引
const visibleRange = computed(() => {
  const start = findStartIndex(scrollTop.value)
  const end = findEndIndex(scrollTop.value + props.height, start)

  return {
    start: Math.max(0, start - props.overscan),
    end: Math.min(props.items.length - 1, end + props.overscan),
  }
})

// 可见的元素
const visibleItems = computed(() => {
  const result = []
  for (let i = visibleRange.value.start; i <= visibleRange.value.end; i++) {
    result.push({
      index: i,
      data: props.items[i],
    })
  }
  return result
})

// 获取项的 key
function getItemKey(item) {
  if (typeof props.itemKey === 'function') {
    return props.itemKey(item.data)
  }
  return item.data[props.itemKey] || item.index
}

// 获取项的高度
function getItemHeight(index) {
  return heightCache.get(index) || props.estimatedItemHeight
}

// 获取项的偏移量
function getItemOffset(index) {
  if (offsetCache.value[index] !== undefined) {
    return offsetCache.value[index]
  }

  // 计算并缓存
  let offset = offsetCache.value[offsetCache.value.length - 1] || 0
  for (let i = offsetCache.value.length; i <= index; i++) {
    offset += getItemHeight(i - 1)
    offsetCache.value[i] = offset
  }

  return offsetCache.value[index]
}

// 二分查找起始索引
function findStartIndex(scrollTop) {
  let left = 0
  let right = props.items.length - 1

  while (left <= right) {
    const mid = Math.floor((left + right) / 2)
    const offset = getItemOffset(mid)

    if (offset === scrollTop) {
      return mid
    } else if (offset < scrollTop) {
      left = mid + 1
    } else {
      right = mid - 1
    }
  }

  return Math.max(0, right)
}

// 查找结束索引
function findEndIndex(bottom, start) {
  let offset = getItemOffset(start)

  for (let i = start; i < props.items.length; i++) {
    offset += getItemHeight(i)
    if (offset >= bottom) {
      return i
    }
  }

  return props.items.length - 1
}

// 设置元素引用
function setItemRef(el, item) {
  if (el) {
    itemRefs.set(item.index, el)
    // 测量高度
    measureItemHeight(el, item.index)
  }
}

// 测量元素高度
const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const index = parseInt(entry.target.dataset.index)
    if (!isNaN(index)) {
      updateItemHeight(index, entry.contentRect.height)
    }
  })
})

function measureItemHeight(el, index) {
  el.dataset.index = index

  // 观察元素大小变化
  resizeObserver.observe(el)

  // 立即测量一次
  const height = el.offsetHeight
  updateItemHeight(index, height)
}

// 更新元素高度
function updateItemHeight(index, height) {
  const oldHeight = getItemHeight(index)

  if (oldHeight === height) return

  // 更新缓存
  heightCache.set(index, height)

  // 更新偏移量缓存
  const delta = height - oldHeight
  for (let i = index + 1; i < offsetCache.value.length; i++) {
    offsetCache.value[i] += delta
  }
}

// 处理滚动
let rafId = null
function handleScroll(e) {
  if (rafId) {
    cancelAnimationFrame(rafId)
  }

  rafId = requestAnimationFrame(() => {
    scrollTop.value = e.target.scrollTop
  })
}

// 清理
onUnmounted(() => {
  if (rafId) {
    cancelAnimationFrame(rafId)
  }
  resizeObserver.disconnect()
})

// 暴露方法
defineExpose({
  scrollToIndex: (index) => {
    const offset = getItemOffset(index)
    containerRef.value.scrollTop = offset
  },
  scrollTo: (offset) => {
    containerRef.value.scrollTop = offset
  },
})
</script>

<style scoped>
.virtual-list {
  position: relative;
}
</style>

<!-- components/VirtualTable/VirtualTable.vue -->
<template>
  <div class="virtual-table" :style="{ height: `${height}px` }">
    <!-- 表头 -->
    <div
      class="virtual-table-header"
      :style="{ transform: `translateX(-${scrollLeft}px)` }"
    >
      <table>
        <thead>
          <tr>
            <th
              v-for="col in visibleColumns"
              :key="col.key"
              :style="{ width: `${col.width}px` }"
            >
              {{ col.title }}
            </th>
          </tr>
        </thead>
      </table>
    </div>

    <!-- 表体 -->
    <div
      ref="bodyRef"
      class="virtual-table-body"
      @scroll="handleScroll"
    >
      <div :style="{ height: `${totalHeight}px`, position: 'relative' }">
        <table>
          <tbody>
            <tr
              v-for="row in visibleRows"
              :key="row.index"
              :style="{
                position: 'absolute',
                top: `${getRowOffset(row.index)}px`,
              }"
            >
              <td
                v-for="col in visibleColumns"
                :key="col.key"
                :style="{ width: `${col.width}px` }"
              >
                <slot
                  :name="`cell-${col.key}`"
                  :row="row.data"
                  :column="col"
                  :value="row.data[col.dataIndex]"
                >
                  {{ row.data[col.dataIndex] }}
                </slot>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
  data: {
    type: Array,
    required: true,
  },
  height: {
    type: Number,
    required: true,
  },
  rowHeight: {
    type: Number,
    default: 50,
  },
})

const bodyRef = ref()
const scrollTop = ref(0)
const scrollLeft = ref(0)

// 可见行范围
const visibleRowRange = computed(() => {
  const start = Math.floor(scrollTop.value / props.rowHeight)
  const end = Math.ceil((scrollTop.value + props.height) / props.rowHeight)

  return {
    start: Math.max(0, start - 5),
    end: Math.min(props.data.length - 1, end + 5),
  }
})

// 可见行
const visibleRows = computed(() => {
  const result = []
  for (let i = visibleRowRange.value.start; i <= visibleRowRange.value.end; i++) {
    result.push({
      index: i,
      data: props.data[i],
    })
  }
  return result
})

// 可见列(简化版,假设所有列都可见)
const visibleColumns = computed(() => props.columns)

// 总高度
const totalHeight = computed(() => {
  return props.data.length * props.rowHeight
})

// 获取行偏移
function getRowOffset(index) {
  return index * props.rowHeight
}

// 处理滚动
function handleScroll(e) {
  scrollTop.value = e.target.scrollTop
  scrollLeft.value = e.target.scrollLeft
}
</script>

<style scoped>
.virtual-table {
  overflow: hidden;
}

.virtual-table-header {
  overflow: hidden;
  border-bottom: 1px solid #d9d9d9;
}

.virtual-table-body {
  height: calc(100% - 50px);
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
</style>

<!-- components/InfiniteScroll/InfiniteScroll.vue -->
<template>
  <div ref="containerRef" class="infinite-scroll">
    <slot :items="allItems"></slot>

    <!-- 加载中 -->
    <div v-if="loading" class="infinite-scroll-loading">
      <a-spin />
      <span>加载中...</span>
    </div>

    <!-- 已加载全部 -->
    <div v-else-if="!hasMore" class="infinite-scroll-end">
      没有更多了
    </div>

    <!-- 哨兵元素 -->
    <div ref="sentinelRef" class="infinite-scroll-sentinel"></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  // 加载函数
  loadMore: {
    type: Function,
    required: true,
  },
  // 初始数据
  initialItems: {
    type: Array,
    default: () => [],
  },
  // 距离底部多远触发加载
  threshold: {
    type: Number,
    default: 100,
  },
})

const containerRef = ref()
const sentinelRef = ref()

const allItems = ref([...props.initialItems])
const loading = ref(false)
const hasMore = ref(true)
const page = ref(1)

let observer = null

onMounted(() => {
  // 使用 IntersectionObserver 监听哨兵元素
  observer = new IntersectionObserver(
    (entries) => {
      const entry = entries[0]
      if (entry.isIntersecting && !loading.value && hasMore.value) {
        load()
      }
    },
    {
      root: containerRef.value,
      rootMargin: `${props.threshold}px`,
    }
  )

  observer.observe(sentinelRef.value)
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
})

// 加载数据
async function load() {
  if (loading.value || !hasMore.value) return

  loading.value = true

  try {
    const result = await props.loadMore(page.value + 1)

    if (result.data && result.data.length > 0) {
      allItems.value = [...allItems.value, ...result.data]
      page.value++

      // 检查是否还有更多
      if (result.data.length < result.pageSize) {
        hasMore.value = false
      }
    } else {
      hasMore.value = false
    }
  } catch (error) {
    console.error('加载失败', error)
  } finally {
    loading.value = false
  }
}

// 暴露方法
defineExpose({
  reset: () => {
    allItems.value = [...props.initialItems]
    page.value = 1
    hasMore.value = true
  },
})
</script>

<style scoped>
.infinite-scroll-loading,
.infinite-scroll-end {
  padding: 20px;
  text-align: center;
  color: #999;
}

.infinite-scroll-sentinel {
  height: 1px;
}
</style>

<!-- views/VirtualListExample.vue -->
<template>
  <div class="page">
    <h2>虚拟列表示例</h2>

    <VirtualList
      :items="items"
      :height="600"
      :estimated-item-height="80"
      item-key="id"
    >
      <template #default="{ item, index }">
        <div class="list-item">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-desc">{{ item.description }}</div>
          <div class="item-footer">
            <span>索引: {{ index }}</span>
            <span>ID: {{ item.id }}</span>
          </div>
        </div>
      </template>
    </VirtualList>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VirtualList from '@/components/VirtualList/VirtualList.vue'

// 生成测试数据
const items = ref(
  Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    title: `Item ${i}`,
    description: `This is description for item ${i}. ${
      i % 3 === 0 ? 'This is a longer description that will take more space.' : ''
    }`,
  }))
)
</script>

<style scoped>
.list-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.item-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.item-footer {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 16px;
}
</style>