#系统设计：大型数据表格

#需求拆解

企业表格可能同时包含：

• 百万级数据、排序、筛选和游标分页。
• 固定列、拖拽列宽、列显隐和个性化配置。
• 行选择、批量操作和单元格编辑。
• 权限、导出和实时数据更新。

先确认哪些操作必须在客户端完成。百万级排序和筛选通常应放在服务端。

#数据层

• 查询条件写入 URL，支持刷新、分享和前进后退。
• 使用游标分页避免数据变化造成页码漂移。
• 缓存最近访问页，并预取相邻页。
• 新查询开始时取消旧请求，防止旧响应覆盖新结果。
• 导出由服务端生成异步任务，前端轮询或接收完成通知。

#渲染层

核心方案是行虚拟化，列很多时再增加列虚拟化：

总滚动区域
└── 可见窗口
    ├── 上缓冲区
    ├── 真实渲染行
    └── 下缓冲区

固定行高最简单；动态行高需要测量并缓存高度，同时修正滚动偏移。为避免快速滚动白屏，可在可见区前后多渲染少量缓冲行。

#编辑与一致性

• 编辑草稿与服务端数据分离。
• 只提交变化字段，并显示保存状态。
• 乐观更新失败时回滚并保留用户输入。
• 多人编辑可使用版本号或 ETag 做乐观并发控制。
• 批量操作应展示部分成功结果，而不是只返回一个总失败。

#状态划分

• URL：查询、排序、筛选。
• 服务端缓存：表格数据和总量。
• 用户配置：列宽、列顺序、列显隐。
• 局部状态：悬停、当前编辑单元格、临时选择。

不要让鼠标移动或输入事件更新整张表的全局状态。

#性能验证

• DOM 节点数是否保持稳定。
• 滚动时主线程是否出现超过 50ms 的长任务。
• 修改一个单元格时多少行发生重渲染。
• 数据缓存是否有容量和过期策略。
• 慢网下旧请求是否会覆盖新查询。