React 性能优化

React 超大表格如何优化渲染和交互性能？

大表格要同时优化数据量、DOM 数量、单元格更新、布局计算和编辑状态，单靠 memo 通常不够。

适合阶段：高级前端 / 资深前端核心能力：表格架构 · 虚拟化 · 细粒度更新

面试官想考什么

• 10 万行表格从哪里开始优化？ 考察分层定位。
• 如何做到单元格级更新？ 考察状态和订阅设计。
• 固定列、动态高度和编辑如何兼容？ 考察复杂场景。
• 如何避免排序筛选卡住主线程？ 考察并发和任务拆分。

一句话回答

超大表格应先用服务端分页或游标减少数据，再用行列虚拟化和细粒度订阅控制 DOM 与更新范围，并把排序、聚合和复杂计算从主线程拆出去。

面试回答详解

1. 先拆成本

数据获取 -> 数据转换 -> React render -> DOM/layout
-> 交互事件 -> 排序/筛选/编辑计算

先确认是数据过多、单元格组件过重、整表更新、布局计算还是同步计算造成卡顿。

2. 渲染策略

• 服务端分页、游标和筛选减少数据传输。
• 行/列虚拟化减少 DOM。
• 稳定列配置、业务 id 和单元格 props。
• 行级或单元格级订阅避免整表更新。

3. 编辑与交互

编辑值不能依赖会被虚拟化回收的局部组件状态；固定列、冻结表头、键盘导航和复制粘贴需要保持坐标语义。排序、筛选和聚合可使用 transition、worker 或服务端计算。

4. 工程边界

虚拟化可能影响打印、浏览器查找和无障碍。复杂表格优先评估成熟库，不要从零实现所有滚动、测量和可访问性细节。

可直接背诵的 30 秒回答

我会先通过分页、游标和服务端筛选控制数据量，再用行列虚拟化控制 DOM。状态上采用稳定 row id、细粒度订阅和单元格级 props，避免编辑一个单元格导致整表更新。排序、聚合和复杂筛选按成本放到 transition、Web Worker 或服务端，同时验证固定列、键盘、复制、打印和无障碍。

扩展知识

表格优化优先级

数据量 -> DOM 数量 -> 更新范围 -> 单元格计算
-> layout/paint -> 交互优先级 -> 体验与可访问性

面试官追问链

追问一：为什么整行 memo 了还是慢？

• 考察点：是否能识别表格外部瓶颈。
• 回答方向：检查单元格数量、列计算、布局、滚动同步、数据转换和第三方脚本，不要只看 React。

追问二：排序应该放前端还是后端？

• 考察点：选型能力。
• 回答方向：看数据规模、排序规则、权限、实时性和网络成本；大数据集和权限相关排序优先服务端，局部小数据可前端即时排序。

追问三：如何测试大表格性能？

• 考察点：验证能力。
• 回答方向：固定数据和设备，测首屏、滚动、编辑、筛选的 INP、长任务、commit 和内存，并做版本回归。

推荐阅读

• React Rendering Lists
• Chrome DevTools Performance
• React 性能优化