长列表滚动优化方案进化史

const container = document.getElementById('virtual-list-container');
const data = Array.from({length: 10000}, (_, i) => ({
  id: i + 1,
  name: `Item ${i + 1}`,
  value: Math.random() * 1000
}));
 
new VirtualList(container, {
  data: data,
  itemHeight: 50,
  containerHeight: 500
});

class OptimizedVirtualList extends VirtualList {
  constructor(container, options) {
    super(container, options);
    this.initObserver();
  }
  
  initObserver() {
    // 创建观察元素
    this.observerElement = document.createElement('div');
    this.observerElement.style.height = '200px';
    this.observerElement.style.opacity = '0';
    this.container.appendChild(this.observerElement);
    
    // 创建Intersection Observer
    this.observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          this.updateVisibleData();
        }
      },
      {
        root: this.container,
        rootMargin: '200px',
        threshold: 0.1
      }
    );
    
    this.observer.observe(this.observerElement);
  }
}

class DynamicHeightVirtualList extends VirtualList {
  constructor(container, options) {
    super(container, options);
    this.heightCache = new Map(); // 缓存已计算的高度
  }
  
  updateVisibleData() {
    const scrollTop = this.container.scrollTop;
    
    // 计算可见区域范围（使用二分查找优化）
    this.startIndex = this.findIndexByScrollTop(scrollTop);
    const visibleCount = Math.ceil(this.containerHeight / this.estimatedItemHeight);
    this.endIndex = Math.min(this.startIndex + visibleCount + 2, this.data.length);
    
    super.updateVisibleData();
  }
  
  findIndexByScrollTop(scrollTop) {
    let low = 0;
    let high = this.data.length - 1;
    let result = 0;
    
    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      const height = this.getCumulativeHeight(mid);
      
      if (height <= scrollTop) {
        result = mid;
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }
    
    return result;
  }
  
  getCumulativeHeight(index) {
    let height = 0;
    for (let i = 0; i <= index; i++) {
      height += this.getHeight(i);
    }
    return height;
  }
  
  getHeight(index) {
    if (this.heightCache.has(index)) {
      return this.heightCache.get(index);
    }
    
    // 计算实际高度（简化版）
    const height = Math.max(50, 50 + Math.random() * 100);
    this.heightCache.set(index, height);
    return height;
  }
}

/**
 * 数据处理Worker
 * 负责处理大数据的解析、排序、筛选等计算密集型任务
 */
self.onmessage = function(e) {
  const { type, data, config } = e.data;
  
  try {
    let result;
    
    switch(type) {
      case 'parse':
        result = parseData(data, config);
        break;
      case 'sort':
        result = sortData(data, config);
        break;
      case 'filter':
        result = filterData(data, config);
        break;
      case 'aggregate':
        result = aggregateData(data, config);
        break;
      default:
        throw new Error('Unknown command type');
    }
    
    self.postMessage({
      type: 'result',
      requestId: config.requestId,
      data: result
    });
    
  } catch (error) {
    self.postMessage({
      type: 'error',
      requestId: config.requestId,
      error: error.message
    });
  }
};
 
/**
 * 解析大数据
 */
function parseData(rawData, config) {
  const startTime = performance.now();
  
  // 模拟大数据解析
  const data = JSON.parse(rawData);
  
  // 数据清洗和格式化
  const processedData = data.map(item => ({
    id: item.id,
    name: item.name || `Item ${item.id}`,
    value: parseFloat(item.value) || 0,
    category: item.category || 'unknown',
    timestamp: new Date(item.timestamp).getTime()
  }));
  
  console.log(`Data parsing completed in ${performance.now() - startTime}ms`);
  return processedData;
}
 
/**
 * 大数据排序
 */
function sortData(data, config) {
  const startTime = performance.now();
  const { field, direction = 'asc' } = config;
  
  // 创建数据副本避免修改原数据
  const sortedData = [...data];
  
  sortedData.sort((a, b) => {
    if (a[field] < b[field]) return direction === 'asc' ? -1 : 1;
    if (a[field] > b[field]) return direction === 'asc' ? 1 : -1;
    return 0;
  });
  
  console.log(`Data sorting completed in ${performance.now() - startTime}ms`);
  return sortedData;
}
 
/**
 * 数据筛选
 */
function filterData(data, config) {
  const startTime = performance.now();
  const { filters } = config;
  
  const filteredData = data.filter(item => {
    return filters.every(filter => {
      const { field, operator, value } = filter;
      
      switch(operator) {
        case '==': return item[field] === value;
        case '!=': return item[field] !== value;
        case '>': return item[field] > value;
        case '<': return item[field] < value;
        case '>=': return item[field] >= value;
        case '<=': return item[field] <= value;
        case 'contains': return item[field].toString().includes(value.toString());
        case 'startsWith': return item[field].toString().startsWith(value.toString());
        case 'endsWith': return item[field].toString().endsWith(value.toString());
        default: return true;
      }
    });
  });
  
  console.log(`Data filtering completed in ${performance.now() - startTime}ms`);
  return filteredData;
}
 
/**
 * 数据聚合
 */
function aggregateData(data, config) {
  const startTime = performance.now();
  const { groupBy, aggregations } = config;
  
  const result = {};
  
  // 分组处理
  data.forEach(item => {
    const groupKey = item[groupBy];
    if (!result[groupKey]) {
      result[groupKey] = {
        count: 0,
        items: []
      };
    }
    
    result[groupKey].count++;
    result[groupKey].items.push(item);
  });
  
  // 聚合计算
  Object.keys(result).forEach(key => {
    const group = result[key];
    
    aggregations.forEach(agg => {
      const { field, type, alias } = agg;
      const values = group.items.map(item => item[field]);
      
      switch(type) {
        case 'sum':
          group[alias] = values.reduce((sum, val) => sum + val, 0);
          break;
        case 'avg':
          group[alias] = values.reduce((sum, val) => sum + val, 0) / values.length;
          break;
        case 'min':
          group[alias] = Math.min(...values);
          break;
        case 'max':
          group[alias] = Math.max(...values);
          break;
        case 'distinct':
          group[alias] = [...new Set(values)].length;
          break;
      }
    });
    
    // 清理临时数据
    delete group.items;
  });
  
  console.log(`Data aggregation completed in ${performance.now() - startTime}ms`);
  return Object.values(result);
}

/**
 * WebWorker数据处理管理器
 * 负责创建Worker、管理任务队列、处理结果回调
 */
class DataProcessor {
  constructor() {
    this.worker = null;
    this.taskQueue = new Map();
    this.nextRequestId = 1;
    
    this.initWorker();
  }
  
  initWorker() {
    // 创建Worker实例
    this.worker = new Worker('data-processor.worker.js');
    
    // 监听Worker消息
    this.worker.onmessage = (e) => {
      this.handleWorkerMessage(e.data);
    };
    
    // 监听Worker错误
    this.worker.onerror = (error) => {
      console.error('Worker error:', error);
      this.handleWorkerError(error);
    };
  }
  
  handleWorkerMessage(message) {
    const { type, requestId, data, error } = message;
    const task = this.taskQueue.get(requestId);
    
    if (!task) return;
    
    try {
      if (type === 'result') {
        task.resolve(data);
      } else if (type === 'error') {
        task.reject(new Error(error));
      }
    } finally {
      this.taskQueue.delete(requestId);
    }
  }
  
  handleWorkerError(error) {
    // 通知所有等待中的任务
    this.taskQueue.forEach((task, requestId) => {
      task.reject(new Error(`Worker error: ${error.message}`));
      this.taskQueue.delete(requestId);
    });
    
    // 重启Worker
    this.initWorker();
  }
  
  createTask(type, data, config = {}) {
    return new Promise((resolve, reject) => {
      const requestId = this.nextRequestId++;
      
      this.taskQueue.set(requestId, {
        resolve,
        reject,
        type,
        timestamp: Date.now()
      });
      
      // 发送任务到Worker
      this.worker.postMessage({
        type,
        data,
        config: {
          ...config,
          requestId
        }
      });
    });
  }
  
  /**
   * 解析数据
   */
  parse(rawData, config = {}) {
    return this.createTask('parse', rawData, config);
  }
  
  /**
   * 排序数据
   */
  sort(data, config = {}) {
    return this.createTask('sort', data, config);
  }
  
  /**
   * 筛选数据
   */
  filter(data, config = {}) {
    return this.createTask('filter', data, config);
  }
  
  /**
   * 聚合数据
   */
  aggregate(data, config = {}) {
    return this.createTask('aggregate', data, config);
  }
  
  /**
   * 销毁Worker
   */
  destroy() {
    if (this.worker) {
      this.worker.terminate();
      this.worker = null;
    }
    this.taskQueue.clear();
  }
}
 
// 单例模式
export const dataProcessor = new DataProcessor();

import { dataProcessor } from './DataProcessor';
 
class LargeDataTable {
  constructor(container) {
    this.container = container;
    this.rawData = null;
    this.processedData = null;
    this.currentPage = 1;
    this.pageSize = 100;
    
    this.init();
  }
  
  async init() {
    // 模拟加载大数据
    await this.loadData();
    
    // 初始化表格
    this.renderTable();
    
    // 绑定事件
    this.bindEvents();
  }
  
  async loadData() {
    try {
      // 模拟网络请求
      const response = await fetch('/api/large-data');
      this.rawData = await response.text();
      
      // 使用WebWorker解析数据
      this.processedData = await dataProcessor.parse(this.rawData, {
        // 解析配置
        format: 'json'
      });
      
      console.log(`Loaded ${this.processedData.length} items`);
      
    } catch (error) {
      console.error('Data loading failed:', error);
    }
  }
  
  async renderTable() {
    if (!this.processedData) return;
    
    // 计算分页数据
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    const pageData = this.processedData.slice(start, end);
    
    // 渲染表格内容
    const tableBody = this.container.querySelector('tbody');
    tableBody.innerHTML = '';
    
    pageData.forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.value.toFixed(2)}</td>
        <td>${item.category}</td>
        <td>${new Date(item.timestamp).toLocaleString()}</td>
      `;
      tableBody.appendChild(row);
    });
    
    // 更新分页信息
    this.updatePagination();
  }
  
  async handleSort(field) {
    try {
      // 使用WebWorker排序
      this.processedData = await dataProcessor.sort(this.processedData, {
        field,
        direction: this.sortField === field && this.sortDirection === 'asc' ? 'desc' : 'asc'
      });
      
      this.sortField = field;
      this.sortDirection = this.sortField === field && this.sortDirection === 'asc' ? 'desc' : 'asc';
      
      this.currentPage = 1;
      this.renderTable();
      
    } catch (error) {
      console.error('Sorting failed:', error);
    }
  }
  
  async handleFilter(filters) {
    try {
      // 使用WebWorker筛选
      const filteredData = await dataProcessor.filter(this.processedData, {
        filters
      });
      
      this.filteredData = filteredData;
      this.currentPage = 1;
      this.renderTable();
      
    } catch (error) {
      console.error('Filtering failed:', error);
    }
  }
  
  updatePagination() {
    const totalPages = Math.ceil((this.filteredData || this.processedData).length / this.pageSize);
    // 更新分页控件...
  }
  
  bindEvents() {
    // 绑定排序、筛选、分页事件...
  }
}

# 安装依赖
npm install vue-virtual-scroller --save

// main.js
import Vue from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
Vue.component('RecycleScroller', RecycleScroller);

<!-- VirtualTable.vue -->
<template>
  <div class="virtual-table">
    <!-- 表头 -->
    <div class="table-header" :style="{ width: tableWidth + 'px' }">
      <div 
        v-for="column in columns" 
        :key="column.prop"
        class="table-header-cell"
        :style="{ width: column.width + 'px' }"
      >
        {{ column.label }}
        <span 
          class="sort-icon"
          @click="handleSort(column.prop)"
        >
          {{ sortField === column.prop ? (sortDirection === 'asc' ? '↑' : '↓') : '' }}
        </span>
      </div>
    </div>
    
    <!-- 虚拟滚动表格主体 -->
    <RecycleScroller
      class="table-body"
      :items="visibleData"
      :item-size="rowHeight"
      :height="tableHeight"
      :width="tableWidth"
      key-field="id"
      v-slot="{ item, index }"
    >
      <div 
        class="table-row"
        :style="{ 
          height: rowHeight + 'px',
          width: tableWidth + 'px',
          backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#ffffff'
        }"
      >
        <div 
          v-for="column in columns" 
          :key="column.prop"
          class="table-cell"
          :style="{ width: column.width + 'px' }"
        >
          {{ formatCell(item, column) }}
        </div>
      </div>
    </RecycleScroller>
    
    <!-- 分页控件 -->
    <div class="table-pagination">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 500, 1000]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'VirtualTable',
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    rowHeight: {
      type: Number,
      default: 50
    },
    tableHeight: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 100,
      sortField: '',
      sortDirection: 'asc',
      filteredData: []
    };
  },
  computed: {
    totalCount() {
      return this.filteredData.length || this.data.length;
    },
    tableWidth() {
      return this.columns.reduce((sum, column) => sum + column.width, 0);
    },
    visibleData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return (this.filteredData || this.data).slice(start, end);
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.currentPage = 1;
      }
    }
  },
  methods: {
    formatCell(item, column) {
      if (column.formatter) {
        return column.formatter(item, column);
      }
      return item[column.prop];
    },
    handleSort(field) {
      if (this.sortField === field) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortField = field;
        this.sortDirection = 'asc';
      }
      
      this.sortData();
    },
    sortData() {
      const data = [...(this.filteredData || this.data)];
      
      data.sort((a, b) => {
        const valueA = a[this.sortField];
        const valueB = b[this.sortField];
        
        if (valueA < valueB) return this.sortDirection === 'asc' ? -1 : 1;
        if (valueA > valueB) return this.sortDirection === 'asc' ? 1 : -1;
        return 0;
      });
      
      this.filteredData = data;
      this.currentPage = 1;
    },
    handleFilter(filters) {
      const filteredData = this.data.filter(item => {
        return Object.keys(filters).every(key => {
          const filterValue = filters[key];
          const itemValue = item[key];
          
          if (!filterValue) return true;
          
          if (typeof itemValue === 'string') {
            return itemValue.includes(filterValue);
          } else if (typeof itemValue === 'number') {
            return itemValue.toString().includes(filterValue.toString());
          }
          
          return true;
        });
      });
      
      this.filteredData = filteredData;
      this.currentPage = 1;
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
    handleCurrentPageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>
 
<style scoped>
.virtual-table {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
}
 
.table-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
}
 
.table-header-cell {
  padding: 0 15px;
  line-height: 50px;
  font-weight: 500;
  text-align: left;
  border-right: 1px solid #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.table-header-cell:last-child {
  border-right: none;
}
 
.sort-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #909399;
}
 
.table-body {
  overflow: hidden;
}
 
.table-row {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
}
 
.table-cell {
  padding: 0 15px;
  line-height: 50px;
  border-right: 1px solid #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.table-cell:last-child {
  border-right: none;
}
 
.table-pagination {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e6e6e6;
}
</style>

<!-- AdvancedVirtualTable.vue -->
<template>
  <div class="advanced-virtual-table">
    <!-- 表格容器 -->
    <div 
      ref="tableContainer"
      class="table-container"
      :style="{ height: tableHeight + 'px' }"
      @scroll="handleScroll"
    >
      <!-- 表头 -->
      <div class="table-header" :style="{ width: tableWidth + 'px' }">
        <div 
          v-for="column in columns" 
          :key="column.prop"
          class="table-header-cell"
          :style="{ width: column.width + 'px' }"
        >
          {{ column.label }}
        </div>
      </div>
      
      <!-- 表格主体 -->
      <div 
        ref="tableBody"
        class="table-body"
        :style="{ 
          height: totalHeight + 'px',
          width: tableWidth + 'px'
        }"
      >
        <!-- 可见区域 -->
        <div 
          ref="visibleArea"
          class="visible-area"
          :style="{ 
            transform: `translateY(${startOffset}px)`,
            height: visibleHeight + 'px',
            width: tableWidth + 'px'
          }"
        >
          <div 
            v-for="(item, index) in visibleData" 
            :key="item.id"
            class="table-row"
            :style="{ 
              height: rowHeight + 'px',
              width: tableWidth + 'px',
              backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#ffffff'
            }"
            @click="handleRowClick(item)"
          >
            <div 
              v-for="column in columns" 
              :key="column.prop"
              class="table-cell"
              :style="{ width: column.width + 'px' }"
            >
              {{ formatCell(item, column) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'AdvancedVirtualTable',
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    rowHeight: {
      type: Number,
      default: 50
    },
    tableHeight: {
      type: Number,
      default: 600
    },
    bufferSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      scrollTop: 0,
      startIndex: 0,
      endIndex: 0,
      visibleData: []
    };
  },
  computed: {
    totalCount() {
      return this.data.length;
    },
    totalHeight() {
      return this.totalCount * this.rowHeight;
    },
    tableWidth() {
      return this.columns.reduce((sum, column) => sum + column.width, 0);
    },
    visibleCount() {
      return Math.ceil(this.tableHeight / this.rowHeight);
    },
    visibleHeight() {
      return Math.min(this.endIndex - this.startIndex, this.totalCount - this.startIndex) * this.rowHeight;
    },
    startOffset() {
      return this.startIndex * this.rowHeight;
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.updateVisibleData();
      }
    },
    scrollTop: {
      handler() {
        this.updateVisibleData();
      }
    }
  },
  mounted() {
    this.updateVisibleData();
    this.addEventListeners();
  },
  beforeDestroy() {
    this.removeEventListeners();
  },
  methods: {
    updateVisibleData() {
      // 计算可见区域索引范围
      this.startIndex = Math.max(0, Math.floor(this.scrollTop / this.rowHeight) - this.bufferSize);
      this.endIndex = Math.min(this.totalCount, this.startIndex + this.visibleCount + this.bufferSize * 2);
      
      // 截取可见数据
      this.visibleData = this.data.slice(this.startIndex, this.endIndex);
    },
    formatCell(item, column) {
      if (column.formatter) {
        return column.formatter(item, column);
      }
      return item[column.prop];
    },
    handleScroll() {
      this.scrollTop = this.$refs.tableContainer.scrollTop;
    },
    handleRowClick(item) {
      this.$emit('row-click', item);
    },
    addEventListeners() {
      // 添加窗口大小变化监听
      window.addEventListener('resize', this.handleResize);
    },
    removeEventListeners() {
      window.removeEventListener('resize', this.handleResize);
    },
    handleResize() {
      // 延迟执行以避免频繁触发
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      
      this.resizeTimer = setTimeout(() => {
        this.updateVisibleData();
      }, 100);
    }
  }
};
</script>
 
<style scoped>
.advanced-virtual-table {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
}
 
.table-container {
  position: relative;
  overflow: auto;
}
 
.table-header {
  position: sticky;
  top: 0;
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
  z-index: 10;
}
 
.table-header-cell {
  padding: 0 15px;
  line-height: 50px;
  font-weight: 500;
  text-align: left;
  border-right: 1px solid #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.table-header-cell:last-child {
  border-right: none;
}
 
.table-body {
  position: relative;
}
 
.visible-area {
  position: relative;
}
 
.table-row {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  transition: background-color 0.2s;
}
 
.table-row:hover {
  background-color: #f0f9ff !important;
}
 
.table-cell {
  padding: 0 15px;
  line-height: 50px;
  border-right: 1px solid #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.table-cell:last-child {
  border-right: none;
}
</style>

class CanvasTable {
  constructor(container, options) {
    this.container = container;
    this.columns = options.columns || [];
    this.data = options.data || [];
    this.rowHeight = options.rowHeight || 50;
    this.headerHeight = options.headerHeight || 50;
    this.cellPadding = options.cellPadding || 15;
    
    this.initCanvas();
    this.initScrollContainer();
    this.bindEvents();
    this.render();
  }
  
  initCanvas() {
    // 创建Canvas元素
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    
    // 设置Canvas样式
    this.canvas.style.position = 'absolute';
    this.canvas.style.top = '0';
    this.canvas.style.left = '0';
    this.canvas.style.display = 'block';
    
    // 计算表格宽度
    this.tableWidth = this.columns.reduce((sum, column) => sum + column.width, 0);
    
    // 设置Canvas尺寸
    this.canvas.width = this.tableWidth;
    this.canvas.height = this.headerHeight + this.data.length * this.rowHeight;
  }
  
  initScrollContainer() {
    // 创建滚动容器
    this.scrollContainer = document.createElement('div');
    this.scrollContainer.className = 'canvas-table-container';
    this.scrollContainer.style.position = 'relative';
    this.scrollContainer.style.overflow = 'auto';
    this.scrollContainer.style.height = (this.container.clientHeight || 600) + 'px';
    this.scrollContainer.style.width = '100%';
    
    // 创建占位元素（用于生成滚动条）
    this.placeholder = document.createElement('div');
    this.placeholder.style.height = this.canvas.height + 'px';
    this.placeholder.style.width = this.tableWidth + 'px';
    
    // 添加元素到容器
    this.scrollContainer.appendChild(this.canvas);
    this.scrollContainer.appendChild(this.placeholder);
    this.container.appendChild(this.scrollContainer);
  }
  
  bindEvents() {
    // 滚动事件
    this.scrollContainer.addEventListener('scroll', () => {
      this.renderVisibleArea();
    });
    
    // 窗口大小变化
    window.addEventListener('resize', () => {
      this.handleResize();
    });
    
    // 鼠标事件
    this.canvas.addEventListener('mousedown', (e) => {
      this.handleMouseDown(e);
    });
    
    this.canvas.addEventListener('mousemove', (e) => {
      this.handleMouseMove(e);
    });
    
    this.canvas.addEventListener('mouseup', (e) => {
      this.handleMouseUp(e);
    });
  }
  
  render() {
    this.renderHeader();
    this.renderVisibleArea();
  }
  
  renderHeader() {
    const ctx = this.ctx;
    const startY = 0;
    
    // 绘制表头背景
    ctx.fillStyle = '#f5f7fa';
    ctx.fillRect(0, startY, this.tableWidth, this.headerHeight);
    
    // 绘制表头边框
    ctx.strokeStyle = '#e6e6e6';
    ctx.lineWidth = 1;
    ctx.strokeRect(0, startY, this.tableWidth, this.headerHeight);
    
    // 绘制表头文字
    ctx.fillStyle = '#303133';
    ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
    ctx.textBaseline = 'middle';
    
    let currentX = 0;
    this.columns.forEach((column, index) => {
      const cellWidth = column.width;
      
      // 绘制文字
      ctx.fillText(
        column.label,
        currentX + this.cellPadding,
        startY + this.headerHeight / 2
      );
      
      // 绘制列分隔线
      if (index < this.columns.length - 1) {
        ctx.beginPath();
        ctx.moveTo(currentX + cellWidth, startY);
        ctx.lineTo(currentX + cellWidth, startY + this.headerHeight);
        ctx.stroke();
      }
      
      currentX += cellWidth;
    });
  }
  
  renderVisibleArea() {
    const scrollTop = this.scrollContainer.scrollTop;
    const containerHeight = this.scrollContainer.clientHeight;
    
    // 计算可见区域范围
    const visibleStartY = Math.max(0, scrollTop - this.rowHeight);
    const visibleEndY = scrollTop + containerHeight + this.rowHeight;
    
    // 计算可见行范围
    const startRow = Math.max(0, Math.floor((visibleStartY - this.headerHeight) / this.rowHeight));
    const endRow = Math.min(this.data.length - 1, Math.ceil((visibleEndY - this.headerHeight) / this.rowHeight));
    
    // 清除可见区域
    this.ctx.clearRect(0, visibleStartY, this.tableWidth, visibleEndY - visibleStartY);
    
    // 绘制可见行
    for (let i = startRow; i <= endRow; i++) {
      this.renderRow(i, visibleStartY, visibleEndY);
    }
  }
  
  renderRow(rowIndex, visibleStartY, visibleEndY) {
    const ctx = this.ctx;
    const data = this.data[rowIndex];
    const rowY = this.headerHeight + rowIndex * this.rowHeight;
    
    // 检查行是否在可见区域内
    if (rowY + this.rowHeight < visibleStartY || rowY > visibleEndY) {
      return;
    }
    
    // 绘制行背景
    ctx.fillStyle = rowIndex % 2 === 0 ? '#ffffff' : '#f9f9f9';
    ctx.fillRect(0, rowY, this.tableWidth, this.rowHeight);
    
    // 绘制行边框
    ctx.strokeStyle = '#e6e6e6';
    ctx.lineWidth = 1;
    ctx.strokeRect(0, rowY, this.tableWidth, this.rowHeight);
    
    // 绘制单元格内容
    ctx.fillStyle = '#606266';
    ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
    ctx.textBaseline = 'middle';
    
    let currentX = 0;
    this.columns.forEach((column, index) => {
      const cellWidth = column.width;
      const cellValue = this.formatCellValue(data, column);
      
      // 绘制文字
      ctx.fillText(
        cellValue,
        currentX + this.cellPadding,
        rowY + this.rowHeight / 2
      );
      
      // 绘制列分隔线
      if (index < this.columns.length - 1) {
        ctx.beginPath();
        ctx.moveTo(currentX + cellWidth, rowY);
        ctx.lineTo(currentX + cellWidth, rowY + this.rowHeight);
        ctx.stroke();
      }
      
      currentX += cellWidth;
    });
  }
  
  formatCellValue(data, column) {
    if (column.formatter) {
      return column.formatter(data, column);
    }
    
    const value = data[column.prop];
    if (value === undefined || value === null) {
      return '';
    }
    
    return String(value);
  }
  
  handleMouseDown(e) {
    const rect = this.canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // 计算点击的行和列
    const rowIndex = Math.floor((y - this.headerHeight) / this.rowHeight);
    const columnIndex = this.getColumnIndexByX(x);
    
    if (rowIndex >= 0 && rowIndex < this.data.length && columnIndex !== -1) {
      this.selectedRow = rowIndex;
      this.selectedColumn = columnIndex;
      this.renderVisibleArea();
      
      // 触发点击事件
      this.onRowClick && this.onRowClick(this.data[rowIndex], rowIndex);
    }
  }
  
  handleMouseMove(e) {
    // 处理鼠标移动事件
  }
  
  handleMouseUp(e) {
    // 处理鼠标抬起事件
  }
  
  getColumnIndexByX(x) {
    let currentWidth = 0;
    for (let i = 0; i < this.columns.length; i++) {
      currentWidth += this.columns[i].width;
      if (x <= currentWidth) {
        return i;
      }
    }
    return -1;
  }
  
  handleResize() {
    // 处理窗口大小变化
    this.scrollContainer.style.height = this.container.clientHeight + 'px';
    this.renderVisibleArea();
  }
  
  updateData(newData) {
    this.data = newData;
    this.canvas.height = this.headerHeight + this.data.length * this.rowHeight;
    this.placeholder.style.height = this.canvas.height + 'px';
    this.render();
  }
  
  updateColumns(newColumns) {
    this.columns = newColumns;
    this.tableWidth = this.columns.reduce((sum, column) => sum + column.width, 0);
    this.canvas.width = this.tableWidth;
    this.placeholder.style.width = this.tableWidth + 'px';
    this.render();
  }
}

class HighPerformanceCanvasTable extends CanvasTable {
  constructor(container, options) {
    super(container, options);
    
    this.initOffscreenCanvas();
    this.initRowCache();
    this.initAnimationFrame();
  }
  
  initOffscreenCanvas() {
    // 创建离屏Canvas用于缓存
    this.offscreenCanvas = document.createElement('canvas');
    this.offscreenCtx = this.offscreenCanvas.getContext('2d');
    
    // 设置离屏Canvas尺寸
    this.offscreenCanvas.width = this.tableWidth;
    this.offscreenCanvas.height = this.headerHeight + this.data.length * this.rowHeight;
    
    // 预渲染表头到离屏Canvas
    this.renderHeaderToOffscreen();
  }
  
  initRowCache() {
    // 行缓存
    this.rowCache = new Map();
    this.cacheLimit = 500; // 缓存限制
  }
  
  initAnimationFrame() {
    this.animationFrameId = null;
    this.renderQueue = new Set();
  }
  
  renderHeaderToOffscreen() {
    const ctx = this.offscreenCtx;
    const startY = 0;
    
    // 绘制表头背景
    ctx.fillStyle = '#f5f7fa';
    ctx.fillRect(0, startY, this.tableWidth, this.headerHeight);
    
    // 绘制表头边框
    ctx.strokeStyle = '#e6e6e6';
    ctx.lineWidth = 1;
    ctx.strokeRect(0, startY, this.tableWidth, this.headerHeight);
    
    // 绘制表头文字
    ctx.fillStyle = '#303133';
    ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
    ctx.textBaseline = 'middle';
    
    let currentX = 0;
    this.columns.forEach((column, index) => {
      const cellWidth = column.width;
      
      // 绘制文字
      ctx.fillText(
        column.label,
        currentX + this.cellPadding,
        startY + this.headerHeight / 2
      );
      
      // 绘制列分隔线
      if (index < this.columns.length - 1) {
        ctx.beginPath();
        ctx.moveTo(currentX + cellWidth, startY);
        ctx.lineTo(currentX + cellWidth, startY + this.headerHeight);
        ctx.stroke();
      }
      
      currentX += cellWidth;
    });
  }
  
  renderRowToCache(rowIndex) {
    if (this.rowCache.has(rowIndex)) {
      return this.rowCache.get(rowIndex);
    }
    
    // 创建临时Canvas用于缓存行
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    
    tempCanvas.width = this.tableWidth;
    tempCanvas.height = this.rowHeight;
    
    const data = this.data[rowIndex];
    
    // 绘制行背景
    tempCtx.fillStyle = rowIndex % 2 === 0 ? '#ffffff' : '#f9f9f9';
    tempCtx.fillRect(0, 0, this.tableWidth, this.rowHeight);
    
    // 绘制行边框
    tempCtx.strokeStyle = '#e6e6e6';
    tempCtx.lineWidth = 1;
    tempCtx.strokeRect(0, 0, this.tableWidth, this.rowHeight);
    
    // 绘制单元格内容
    tempCtx.fillStyle = '#606266';
    tempCtx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto';
    tempCtx.textBaseline = 'middle';
    
    let currentX = 0;
    this.columns.forEach((column, index) => {
      const cellWidth = column.width;
      const cellValue = this.formatCellValue(data, column);
      
      // 绘制文字
      tempCtx.fillText(
        cellValue,
        currentX + this.cellPadding,
        this.rowHeight / 2
      );
      
      // 绘制列分隔线
      if (index < this.columns.length - 1) {
        tempCtx.beginPath();
        tempCtx.moveTo(currentX + cellWidth, 0);
        tempCtx.lineTo(currentX + cellWidth, this.rowHeight);
        tempCtx.stroke();
      }
      
      currentX += cellWidth;
    });
    
    // 添加到缓存
    this.rowCache.set(rowIndex, tempCanvas);
    
    // 缓存清理
    if (this.rowCache.size > this.cacheLimit) {
      const oldestKey = Array.from(this.rowCache.keys()).sort((a, b) => a - b)[0];
      this.rowCache.delete(oldestKey);
    }
    
    return tempCanvas;
  }
  
  renderVisibleArea() {
    // 使用requestAnimationFrame优化渲染
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    
    this.animationFrameId = requestAnimationFrame(() => {
      const scrollTop = this.scrollContainer.scrollTop;
      const containerHeight = this.scrollContainer.clientHeight;
      
      // 计算可见区域范围
      const visibleStartY = Math.max(0, scrollTop - this.rowHeight);
      const visibleEndY = scrollTop + containerHeight + this.rowHeight;
      
      // 计算可见行范围
      const startRow = Math.max(0, Math.floor((visibleStartY - this.headerHeight) / this.rowHeight));
      const endRow = Math.min(this.data.length - 1, Math.ceil((visibleEndY - this.headerHeight) / this.rowHeight));
      
      // 清除可见区域
      this.ctx.clearRect(0, visibleStartY, this.tableWidth, visibleEndY - visibleStartY);
      
      // 绘制表头（如果在可见区域内）
      if (visibleStartY < this.headerHeight) {
        this.ctx.drawImage(
          this.offscreenCanvas,
          0, 0,
          this.tableWidth, this.headerHeight,
          0, 0,
          this.tableWidth, this.headerHeight
        );
      }
      
      // 批量绘制可见行
      for (let i = startRow; i <= endRow; i++) {
        const rowY = this.headerHeight + i * this.rowHeight;
        
        // 检查行是否在可见区域内
        if (rowY + this.rowHeight < visibleStartY || rowY > visibleEndY) {
          continue;
        }
        
        // 从缓存或直接绘制行
        const rowCanvas = this.renderRowToCache(i);
        this.ctx.drawImage(rowCanvas, 0, rowY);
      }
    });
  }
  
  updateData(newData) {
    super.updateData(newData);
    
    // 清理缓存
    this.rowCache.clear();
    
    // 更新离屏Canvas尺寸
    this.offscreenCanvas.height = this.headerHeight + this.data.length * this.rowHeight;
    this.renderHeaderToOffscreen();
  }
  
  updateColumns(newColumns) {
    super.updateColumns(newColumns);
    
    // 清理缓存
    this.rowCache.clear();
    
    // 更新离屏Canvas尺寸
    this.offscreenCanvas.width = this.tableWidth;
    this.renderHeaderToOffscreen();
  }
  
  destroy() {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    
    // 移除事件监听
    this.scrollContainer.removeEventListener('scroll', this.renderVisibleArea.bind(this));
    window.removeEventListener('resize', this.handleResize.bind(this));
    
    // 清理缓存
    this.rowCache.clear();
  }
}