前言

在移动应用开发中，长列表渲染是一个经典的性能挑战。当列表数据量达到数千甚至上万条时，如果一次性创建所有列表项的DOM节点，不仅会导致首屏渲染缓慢，还会占用大量内存，严重影响用户体验。

虚拟列表（Virtual List）技术通过"只渲染可见区域"的策略，完美解决了这个问题。本文将介绍如何使用Kotlin Multiplatform（KMP）实现一个高性能的虚拟列表引擎，并在OpenHarmony的ArkUI中实现万级数据的流畅滚动。

什么是虚拟列表？

虚拟列表的核心思想是：无论数据有多少条，只渲染用户当前能看到的那部分。

假设我们有10000条数据，每条高度80px，屏幕可视区域高度600px：

• 传统方式：创建10000个DOM节点，内存占用巨大
• 虚拟列表：只创建约18个DOM节点（600/80 + 缓冲区），内存占用极小

优化效果对比：

指标	传统渲染	虚拟列表	优化比例
DOM节点数	10000	18	99.82%
内存占用	~100MB	~2MB	98%
首屏时间	>3s	<100ms	97%

KMP虚拟列表引擎实现

数据模型定义

首先定义列表项和统计信息的数据模型：

@file:OptIn(ExperimentalJsExport::class)

import kotlin.js.ExperimentalJsExport
import kotlin.js.JsExport

/**
 * 列表项数据模型
 */
@JsExport
data class ListItem(
    val id: String,
    val title: String,
    val subtitle: String,
    val avatar: String,
    val timestamp: Double
)

/**
 * 可见区域信息
 */
@JsExport
data class VisibleRange(
    val startIndex: Int,
    val endIndex: Int,
    val visibleCount: Int
)

/**
 * 渲染性能统计
 */
@JsExport
data class RenderStats(
    val totalItems: Int,        // 总数据量
    val renderedItems: Int,     // 实际渲染数量
    val skippedItems: Int,      // 跳过渲染数量
    val renderRatio: Double,    // 渲染比例(%)
    val estimatedSavedNodes: Int, // 节省的DOM节点数
    val bufferSize: Int         // 缓冲区大小
)

VisibleRange记录当前应该渲染的数据范围，RenderStats提供详细的性能统计，让优化效果可量化。

虚拟列表管理器核心实现

@JsExport
object VirtualListManager {
    private val allItems = mutableListOf<ListItem>()
    private var initialized = false
    
    // 配置参数
    private var itemHeight = 80.0      // 每项高度（固定高度简化计算）
    private var viewportHeight = 600.0 // 可视区域高度
    private var bufferCount = 5        // 上下缓冲区项数
    
    // 当前状态
    private var currentScrollOffset = 0.0
    private var lastVisibleRange: VisibleRange? = null

管理器使用固定高度策略（每项80px），这大大简化了位置计算。bufferCount定义了上下缓冲区的大小，用于预渲染即将进入可视区域的项，避免滚动时出现空白。

可见区域计算算法

这是虚拟列表的核心算法：

/**
 * 计算可见区域范围（核心算法）
 */
fun calculateVisibleRange(scrollOffset: Double): VisibleRange {
    if (!initialized) initialize()
    
    currentScrollOffset = scrollOffset
    
    // 计算可见区域的起始索引（向上取整后减去缓冲区）
    val startIndex = maxOf(0, (scrollOffset / itemHeight).toInt() - bufferCount)
    
    // 计算可视区域能容纳的项数
    val visibleCount = (viewportHeight / itemHeight).toInt() + 1
    
    // 计算结束索引（加上双倍缓冲区）
    val endIndex = minOf(allItems.size - 1, startIndex + visibleCount + bufferCount * 2)
    
    val range = VisibleRange(
        startIndex = startIndex,
        endIndex = endIndex,
        visibleCount = endIndex - startIndex + 1
    )
    
    lastVisibleRange = range
    return range
}

算法解析：

1. startIndex：根据滚动偏移量计算第一个可见项的索引，减去缓冲区确保上方有预渲染的项
2. visibleCount：可视区域能容纳的项数
3. endIndex：最后一个需要渲染的项索引，加上缓冲区确保下方有预渲染的项
4. 使用maxOf和minOf确保索引不越界

获取可见区域数据

/**
 * 获取可见区域的数据项
 */
fun getVisibleItems(scrollOffset: Double): Array<ListItem> {
    val range = calculateVisibleRange(scrollOffset)
    return allItems.subList(range.startIndex, range.endIndex + 1).toTypedArray()
}

这个方法返回当前应该渲染的数据数组，ArkUI层直接使用这个数组进行渲染。

渲染性能统计

/**
 * 获取渲染性能统计
 */
fun getRenderStats(): RenderStats {
    if (!initialized) initialize()
    
    val range = lastVisibleRange ?: VisibleRange(0, 0, 0)
    val renderedItems = range.visibleCount
    val skippedItems = allItems.size - renderedItems
    val renderRatio = if (allItems.isNotEmpty()) {
        (renderedItems.toDouble() / allItems.size * 100)
    } else 0.0
    
    return RenderStats(
        totalItems = allItems.size,
        renderedItems = renderedItems,
        skippedItems = skippedItems,
        renderRatio = round(renderRatio, 2),
        estimatedSavedNodes = skippedItems,
        bufferSize = bufferCount
    )
}

统计方法计算了实际渲染数量、跳过数量和渲染比例，让优化效果一目了然。

模拟数据生成

为了让演示效果更真实，我们生成多样化的数据：

fun initialize() {
    if (initialized) return
    
    val currentTime = js("Date.now()").unsafeCast<Double>()
    
    // 丰富的标题模板
    val titleTemplates = arrayOf(
        "今日头条：%s发布重大更新",
        "突发！%s宣布新战略",
        "深度解析：%s的未来发展",
        "独家专访：%s创始人谈创业",
        // ... 更多模板
    )
    
    // 公司/产品名称
    val subjects = arrayOf(
        "华为", "小米", "腾讯", "阿里巴巴", "字节跳动",
        "OpenAI", "Google", "Apple", "Microsoft", "Tesla",
        // ... 更多名称
    )
    
    for (i in 0 until 10000) {
        val titleTemplate = titleTemplates[i % titleTemplates.size]
        val subject = subjects[(i * 7) % subjects.size]
        
        allItems.add(
            ListItem(
                id = "item_$i",
                title = titleTemplate.replace("%s", subject),
                subtitle = "[$category] $desc",
                // ...
            )
        )
    }
    initialized = true
}

通过模板组合，10000条数据每条都有不同的标题和描述。

ArkUI视图层实现

页面结构

import {
  VirtualListManager,
  ListItem,
  VisibleRange,
  RenderStats,
  ScrollState
} from './hellokjs'

// 重命名避免与ArkUI的ListItem冲突
type VirtualListItem = ListItem

const virtualListManager = VirtualListManager.getInstance()

@Entry
@Component
struct Index {
  // 配置参数
  private itemHeight: number = 80
  private viewportHeight: number = 600
  private bufferCount: number = 5

  // 状态
  @State visibleItems: VirtualListItem[] = []
  @State visibleRange: VisibleRange | null = null
  @State renderStats: RenderStats | null = null
  @State scrollState: ScrollState | null = null
  @State currentScrollOffset: number = 0
  @State contentHeight: number = 0

  aboutToAppear(): void {
    virtualListManager.initialize()
    virtualListManager.configure(this.itemHeight, this.viewportHeight, this.bufferCount)
    this.contentHeight = virtualListManager.getContentHeight()
    this.updateVisibleItems(0)
    this.printOptimizationStats('初始化完成')
  }
}

更新可见项并打印统计

private updateVisibleItems(scrollOffset: number): void {
  this.currentScrollOffset = scrollOffset
  this.visibleItems = Array.from(virtualListManager.getVisibleItems(scrollOffset))
  this.visibleRange = virtualListManager.calculateVisibleRange(scrollOffset)
  this.renderStats = virtualListManager.getRenderStats()
  this.scrollState = virtualListManager.getScrollState()
  this.printOptimizationStats('滚动更新')
}

private printOptimizationStats(action: string): void {
  if (this.renderStats && this.visibleRange && this.scrollState) {
    console.info('========================================')
    console.info(`[虚拟列表优化] ${action}`)
    console.info('========================================')
    console.info(`📊 数据统计:`)
    console.info(`   - 总数据量: ${this.renderStats.totalItems} 条`)
    console.info(`   - 实际渲染: ${this.renderStats.renderedItems} 条`)
    console.info(`   - 跳过渲染: ${this.renderStats.skippedItems} 条`)
    console.info(`   - 渲染比例: ${this.renderStats.renderRatio}%`)
    console.info(`🚀 性能优化:`)
    console.info(`   - 节省DOM节点: ${this.renderStats.estimatedSavedNodes} 个`)
    console.info(`📍 可见范围: ${this.visibleRange.startIndex} - ${this.visibleRange.endIndex}`)
    console.info('========================================')
  }
}

每次滚动都会在控制台打印详细的优化统计信息。

虚拟列表渲染

build() {
  Column() {
    // 标题栏和统计面板...
    
    // 虚拟列表核心实现
    Stack() {
      // 占位容器（撑开滚动高度）
      Column()
        .width('100%')
        .height(this.contentHeight)  // 10000 * 80 = 800000px

      // 可见项渲染（只渲染约18项）
      Column() {
        ForEach(this.visibleItems, (item: VirtualListItem, index: number) => {
          this.VirtualListItemView(item, index)
        }, (item: VirtualListItem) => item.id)
      }
      .width('100%')
      .position({ 
        x: 0, 
        y: this.visibleRange ? this.visibleRange.startIndex * this.itemHeight : 0 
      })
    }
    .width('100%')
    .layoutWeight(1)
    .clip(true)
  }
}

关键实现：

1. 外层Stack容器
2. 第一个Column是占位容器，高度为总内容高度（800000px），用于撑开滚动区域
3. 第二个Column是实际渲染的可见项，通过position定位到正确位置
4. ForEach只遍历visibleItems（约18项），而不是全部10000项

统计面板

@Builder
StatsPanel() {
  Column() {
    Row() {
      Column() {
        Text('总数据量')
        Text(`${this.renderStats?.totalItems}`)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333333')
      }
      Column() {
        Text('渲染数量')
        Text(`${this.renderStats?.renderedItems}`)
          .fontColor('#007DFF')
      }
      Column() {
        Text('跳过数量')
        Text(`${this.renderStats?.skippedItems}`)
          .fontColor('#4CAF50')
      }
      Column() {
        Text('渲染比例')
        Text(`${this.renderStats?.renderRatio}%`)
          .fontColor('#FF5722')
      }
    }
    
    Text(`节省 ${this.renderStats?.estimatedSavedNodes} 个DOM节点创建`)
      .fontColor('#4CAF50')
  }
  .backgroundColor('#FFF8E1')
}

控制台输出示例

========================================
[虚拟列表优化] 初始化完成
========================================
📊 数据统计:
   - 总数据量: 10000 条
   - 实际渲染: 18 条
   - 跳过渲染: 9982 条
   - 渲染比例: 0.18%
🚀 性能优化:
   - 节省DOM节点: 9982 个
   - 缓冲区大小: 5 项
📍 可见范围:
   - 起始索引: 0
   - 结束索引: 17
   - 可见数量: 18 项
📜 滚动状态:
   - 滚动位置: 0px
   - 内容高度: 800000px
   - 滚动进度: 0%
========================================

性能数据

指标	值
总数据量	10000 条
实际渲染	18 条
跳过渲染	9982 条
渲染比例	0.18%
节省DOM节点	9982 个
内容总高度	800000px

优化建议

1. 动态高度支持

本文使用固定高度简化实现。如果需要支持动态高度，可以：

• 预计算每项高度并缓存
• 使用估算高度 + 实际测量修正

2. 滚动节流

频繁的滚动事件可能导致性能问题，可以添加节流：

private lastUpdateTime: number = 0
private throttleInterval: number = 16 // 约60fps

private onScroll(yOffset: number): void {
  const now = Date.now()
  if (now - this.lastUpdateTime < this.throttleInterval) return
  this.lastUpdateTime = now
  // 更新逻辑...
}

3. 预加载优化

可以根据滚动方向预加载更多数据：

fun preloadDirection(scrollDirection: Int) {
    if (scrollDirection > 0) {
        // 向下滚动，增加下方缓冲区
        bufferCount = 8
    } else {
        // 向上滚动，增加上方缓冲区
        bufferCount = 8
    }
}

总结

本文通过一个完整的实战案例，展示了如何使用KMP实现虚拟列表引擎，并在OpenHarmony ArkUI中实现万级数据的流畅渲染。核心要点：

• 只渲染可见区域：通过计算滚动位置确定需要渲染的数据范围
• 缓冲区机制：预渲染上下缓冲区的项，避免滚动时出现空白
• position定位：使用绝对定位将可见项放置到正确位置
• 性能监控：实时统计渲染数量和优化比例，量化优化效果

这种架构将复杂的计算逻辑封装在KMP层，ArkUI层只负责根据计算结果进行渲染，实现了清晰的职责分离。KMP的跨平台特性使得同一套虚拟列表引擎可以在Android、iOS、OpenHarmony上复用。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net