大数据表格如何渲染

大数据表格如何渲染?

维格表、飞书表格、钉钉表格，在线表格追求大数据量

1.数据足够大，大数据公司，需要在前端展示大量数据，以往防卡顿，所以我们想要通过更好方案实现。
2.我作为负责人，调研这部分方案
1.dom
2.虚拟表格
3.canvas table
4.可视区绘制算法优化
5.canvas 结合 Webassembly 技术实现(skia + Webassembly)
3.我封装了画布表格引擎，解决了上述问题，并且能够实现 1000w 数据加载流畅交互
4.在这个过程中遇到那些问题，我是怎么解决问题的，卡点

虚拟表格

1. 虚拟表格的基本原理
   虚拟表格的核心思想是只渲染用户当前可见的部分数据，而不是一次性渲染整个数据集。通过这种方式，可以显著减少DOM节点的数量，从而提高渲染性能和用户交互的流畅性。
2. 实现步骤
   数据分片：将大数据集分成多个小块，只在用户滚动时加载当前可见区域的数据。
   计算可见区域：根据用户的滚动位置，计算出当前可见的行数和列数。
   动态渲染：根据可见区域的数据动态渲染表格，只在DOM中插入当前可见的数据行。
   占位符：为了保持表格的整体布局，可以使用占位符来填充未渲染的行，确保表格的高度和宽度保持一致。
3. 第三方的插件虚拟表格插件
   vxe-table
   代码

<template>
  <div>
    <vxe-table
      :data="tableData"
      :scroll-y="{ enabled: true }"
      :scroll-x="{ enabled: true }"
      :height="tableHeight"
      :max-height="maxHeight"
      :column-config="{ resizable: true }"
      :size="'medium'"
      stripe
      border
      :virtual-scroll="{ enabled: true }"
    >
      <vxe-column field="id" title="ID" width="100"></vxe-column>
      <vxe-column field="name" title="Name" width="200"></vxe-column>
      <vxe-column field="age" title="Age" width="100"></vxe-column>
      <!-- 其他列 -->
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 用于存储大数据
      tableHeight: 600, // 表格高度
      maxHeight: 800, // 最大高度
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟加载大数据
      const data = [];
      for (let i = 0; i < 1000000; i++) {
        data.push({
          id: i,
          name: `Name ${i}`,
          age: Math.floor(Math.random() * 100),
        });
      }
      this.tableData = data;
    },
  },
};
</script>

<style>
/* 你可以在这里添加自定义样式 */
</style>
</