AI 一次写入十万行数据,为什么页面直接卡死了?

发布时间:2026/8/7 11:47:00
AI 一次写入十万行数据,为什么页面直接卡死了? 模型规划得没问题工具参数也完全正确但用户点下执行后页面停住几秒滚动条不动浏览器甚至提示“页面无响应”。原因往往很朴素Agent 把一次批量任务拆成了成千上万次单元格更新每次更新又触发绘制、事件和公式重算。AI 没做错执行方式错了。工具调用少不代表底层操作少模型可能只调用了一次{ tool: formatReport, range: A1:Z10000 }但工具内部如果逐单元格设置值、字体、背景色和格式实际可能产生几十万次对象操作。表格组件在数据变化后需要刷新界面公式相关单元格还会触发计算监听器可能继续更新任务摘要。三个成本叠加页面就会卡住。批量更新先暂停绘制SpreadJS 提供 suspendPaint() 和 resumePaint()。当一组修改需要连续完成时可以暂停中间绘制最后统一刷新。spread.suspendPaint(); try { applyValues(); applyFormulas(); applyStyles(); } finally { spread.resumePaint(); }finally 不能省。如果执行中间抛错却没有恢复绘制工作簿可能一直处于不刷新的状态。对于会触发大量监听逻辑的确定性批处理还可以评估是否临时暂停事件涉及密集公式更新时则要单独设计计算时机。重点不是把所有机制一律关闭而是避免每改一格就完整走一遍刷新链。能按区域操作就不要逐格循环Agent 工具的粒度会直接影响性能。低效的工具常常只提供setCellValue(row, col, value)于是模型或调度器为了填一块区域调用它几千次。更合理的是提供批量语义setRangeValues({ sheetName, startRow, startCol, values: unknown[][] })样式也应该尽量针对 Range 设置而不是每个 Cell 设置一次。工具层表达的是业务批量动作执行层才有机会做合并和优化。进度条不能靠猜超过一两秒的任务用户需要知道系统还在工作。但进度不能只做一个循环动画。批量工具在执行前已经知道目标行数可以分块并返回实际进度正在写入数据 4000 / 10000 正在应用公式 7200 / 10000 正在生成样式如果公式计算量很大也要把“数据写入完成”和“计算仍在进行”分开表达。否则用户看到表格已经有数据以为任务完成马上开始编辑容易和后续计算冲突。分块执行不只是为了流畅十万行一次性执行失败时错误很难定位。按块处理可以记录每一块的状态{ taskId: task_901, chunks: [ {range: A1:Z2000, status: success}, {range: A2001:Z4000, status: success}, {range: A4001:Z6000, status: failed} ] }但分块也会引入一致性问题。前两块成功、第三块失败后是保留已完成部分还是整体回滚这必须在工具定义时决定不能等出错后临时猜。对于“导入数据”可以支持断点续传对于“重算整份报价表”可能更适合全有或全无。性能预算应该写进工具约束一个工具除了参数 Schema还可以声明成本{ maxCells: 50000, estimatedMs: 1800, supportsChunking: true, requiresProgress: true, rollbackMode: snapshot }模型不一定需要看到所有底层指标但调度器可以据此决定是否拆分任务是否先询问用户是否创建快照是否切换到后台执行是否拒绝超大范围。Agent 的“自动”不能等于不设资源上限。性能问题本质上也是工具设计问题同一个 SpreadJS API人工点一次按钮可能很顺交给 Agent 后因为操作范围变大、步骤变多性能瓶颈会被迅速放大。因此表格工具不只要安全、可验证还要有批量语义、执行预算和进度反馈。当模型说“处理整张表”时执行器首先想到的不该是 for 循环而应该是影响多少单元格、能否合并操作、何时绘制、何时计算、失败怎么收场。SpreadJS AI Agent 实战中的工具执行放在浏览器端这意味着性能和任务状态必须一起设计。后续会继续拆解如何让工具既能被模型调用也符合前端应用的运行规律。想把这套方案真正跑起来批量操作一旦进入真实工作簿绘制、事件、计算和异常恢复都会变成前端工程问题。课程基于真实 SpreadJS AI Agent 项目拆解浏览器端工具执行让你看到模型调用之外那些决定页面能否稳定运行的实现细节。课程《从 0 到 1 掌握企业级表格 Agent 搭建》基于公开的 SpreadJS AI Agent 项目共 7 节每节约 20 分钟从整体架构一路讲到安全确认、快照回滚和调试体系。点击查看课程地址对应源码https://gitee.com/GrapeCity/spreadjs-ai-agent。项目基于 TypeScript/TSX 和 SpreadJSREADME 已整理工具体系、MCP 配置、受控代码执行、快照与恢复等入口适合边读代码边验证。本文相关看点批量表格工具、suspendPaint 状态管理和异常后的自动恢复。