表格开发常见的渲染方式
初级：table DOM
这是最基础的实现方式，直接使用 HTML 的 <table> 元素来渲染表格。
实现方案
- 简单实现: 直接使用 HTML 和 JavaScript 来渲染表格。
- 实现方案: 适用于数据量较少的场景，当行数和列数有限时，直接使用 DOM 元素处理方便。
中级：虚拟表格
使用虚拟化技术来渲染表格，只有视口中的行和列才会渲染。
实现方案
- 库选择: 使用 react-window 或 react-virtualized 等库，来实现虚拟表格。
- 适用场景: 适用于数据量较大但需要浏览的行数有限的情况，使用虚拟化技术减少 DOM 渲染的数量。
高级：canvas table
使用 HTML5 Canvas 来绘制表格内容，避免大量 DOM 操作，提高渲染性能。
实现方案
- 使用 Canvas API: 通过 Canvas API 手动绘制表格的每个单元格。
- 适用场景: 适用于需要更高效渲染和更灵活绘制能力的场景。
专家：canvas + tile 技术
通过将表格划分为多个 tile（瓷砖）区域，只渲染当前视口及周围的 tile，提高渲染性能和内存使用效率。
实现方案
- Tile 分区: 将表格划分为多个 tile 区域，每个 tile 只包含一定数量的单元格。
- 懒加载和预加载: 仅在需要时加载和渲染特定的 tile，同时预加载用户视口附近的 tile。
高级专家：skia + WebAssembly
使用 Skia 图形库结合 WebAssembly，实现高性能、跨平台的表格渲染。
实现方案
- Skia 图形库: Skia 是一个跨平台的 2D 图形库，可以高效地绘制复杂图形。
- WebAssembly: 通过 WebAssembly 将 Skia 集成到 Web 应用中，提升图形渲染性能。