长列表渲染方案对比

<div class="comparison-grid">
  <!-- 四个擂台，每个选手一个 -->
  <div class="method-card">
    <div class="method-header">
      <div class="method-title">DOM直接渲染</div>
      <div class="method-description">传统方式，直接创建DOM元素</div>
    </div>
    <!-- 比赛区域和统计面板 -->
  </div>
</div>

function renderDOMList(data) {
  // 如果数据量过大，直接认输
  if (data.length > 10000) {
    container.innerHTML =
      '<div class="performance-warning">⚠️ 数据量过大，可能导致浏览器卡顿，建议使用其他方案</div>'
    return
  }

  // 暴力创建所有DOM节点
  const fragment = document.createDocumentFragment()
  data.forEach((item, index) => {
    const div = document.createElement('div')
    // ... 创建完整DOM结构
    fragment.appendChild(div)
  })
}

function updateVirtualList() {
  // 只渲染可见区域，聪明！
  const start = Math.floor(scrollTop / itemHeight)
  const end = Math.min(
    start + Math.ceil(containerHeight / itemHeight) + 1,
    data.length
  )

  // 清空视口，重新渲染可见项
  viewport.innerHTML = ''
  for (let i = start; i < end; i++) {
    // 只创建可见的DOM节点
  }
}

function renderCanvasList(data) {
  canvasList = new AdvancedCanvasVirtualList(canvas, {
    itemHeight: 60,
    padding: 16,
    fontSize: 14,
  })

  canvasList.setData(data)

  // 实时监控性能，炫耀实力
  const updateCanvasStats = () => {
    const stats = canvasList.getPerformanceStats()
    document.getElementById('canvasFPS').textContent = `${stats.fps}`
  }
}

function renderTimeSlicingList(data) {
  let currentIndex = 0
  const chunkSize = 50 // 每次只渲染50个

  function renderChunk() {
    // 渲染一小批
    for (let i = currentIndex; i < endIndex; i++) {
      // 创建DOM元素
    }

    // 还没完？下一帧继续！
    if (currentIndex < data.length) {
      requestAnimationFrame(renderChunk)
    }
  }
}

// 比赛控制中心
function runPerformanceTest() {
  const count = parseInt(document.getElementById('dataCount').value)
  testData = generateTestData(count)

  // 依次让选手上场比赛
  setTimeout(() => renderDOMList(testData), 100)
  setTimeout(() => renderVirtualList(testData), 200)
  setTimeout(() => renderCanvasList(testData), 300)
  setTimeout(() => renderTimeSlicingList(testData), 400)
}