大表格卡顿怎么排查

先理解原理和示例,再练习完整口述与追问。

测量瓶颈;缩小更新;减少节点。

先判断卡顿发生在下载、数据处理、框架 render、DOM 布局还是绘制。表格列多、单元格组件复杂、每次创建全新行对象和深度 watcher 都可能放大工作量;十万 DOM 节点的成本也不是给组件加缓存就能消除。

录制一次滚动或筛选的性能轨迹,看长任务与调用栈;对比只渲染简单文本、关闭非必要联动和减少可见行后的差别。必要时分页或虚拟化,稳定 row 和回调引用,延迟非关键格式化。用同一数据量、设备、缓存条件复测响应时间和内存。

不要先全局加 memo、deep compare 或 shallowRef。优化必须与具体读写方式匹配,并验证选择行、输入、键盘焦点和滚动定位仍然正确。

先录制性能,区分数据转换、组件重新计算、DOM 数量、布局与绘制。Vue 检查不必要深度响应、整表依赖和不稳定 props;React 检查状态放得过高、整表重渲染和无效 memo。共同措施是分页或虚拟化、稳定业务 key、减少单元格重工作。优化后在相同数据与设备下测,不靠框架名称判断性能。