给 Univer 做一次性能体检:3 个阈值 + 4 步调优路线 📅 发布时间:2026/8/24 21:41:42 👁 浏览次数: 给 Univer 做一次性能体检3 个阈值 4 步调优路线【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univerUniver 是同时做电子表格、文档和幻灯片的全栈框架跑在网页端也跑在 Node 服务端。一旦滚动掉帧、内存越涨越高用户的直观感受就是卡和越用越慢。本文带你做一次系统性能测试先定标准再压场景最后调优三步走完。先定标准把快和稳变成可量化的数字 下表把快和稳翻译成能断言的数字验证位置都能直接打开跑指标它回答什么问题参考阈值验证位置单元内存溢出一次加载数据后堆涨了多少≤1MBe2e/memory/memory.spec.ts二次实例溢出换一个实例后涨了多少≤200KBe2e/memory/memory.spec.ts整体内存溢出从头到尾累计涨多少≤6MBe2e/memory/memory.spec.ts滚动 FPS滚动时画面卡不卡空表≥50 / 冻结≥30 / 合并≥20 / 溢出≥50e2e/perf/scroll.spec.ts这些阈值不是拍脑袋。FPS 用 requestAnimationFrame每帧回调一次用来数画面刷了多少帧逐帧计帧再取平均内存则强制 GC 后读取 JSHeapUsedSize对比操作前后的差值只算真正没被回收的部分。再压场景把项目放进真实使用里 1. 大数据表格滚动当你在一万多行的表里快速拖动滚动条时画面是否还稳怎么做打开 e2e/perf/scroll.spec.ts它用 measureFPS 模拟连续滚轮事件测 5 秒取平均帧率。看什么空表≥50 FPS冻结窗格≥30 FPS合并单元格≥20 FPS数据溢出≥50 FPS。怎么判断达标说明渲染管线没被阻塞不达标说明有同步任务卡进了渲染循环。合并单元格大数据滚动只有可视区域内的单元格被渲染滚动时不掉帧2. 多工作表切换当你在多张工作表之间来回切换时是否出现异常或越用越慢怎么做打开 e2e/smoking/sheets-multi/sheets-multi-smoking.spec.ts它启动 sheets-multi 页面监听 10 秒内的 pageerror。看什么10 秒内零报错切换工作簿无异常。怎么判断达标说明销毁和重建干净不达标说明有残留监听或实例未回收。多工作表切换sheets-multi 场景下多个工作簿并行展示与切换3. 长时间运行不泄漏当你反复创建、销毁 Univer 实例时内存是否会一路累积怎么做打开 e2e/memory/memory.spec.ts它连续 loadAndRelease 两次后对比堆内存再换实例做二次对比。看什么二次实例增量≤200KB整体增量≤6MB。怎么判断达标说明 GC 能完整回收不达标说明存在累积性内存泄漏。内存泄漏检测强制 GC 后对比 JSHeapUsedSize 差值定位残留对象后调优拿到数据之后动手 数据出来之后按这个顺序动手环境锁死浏览器与分辨率。playwright.config.ts 固定 Chromium、1280×720。复现重跑目标场景。pnpm test:e2e触发滚动与内存用例。定位读堆快照与 trace。结果落在 test-results/ 目录。验证改动后回到表内。重跑 e2e/perf/scroll.spec.ts 确认 FPS 达标。常见问答 为什么我的机器上 FPS 比文档里低阈值是按固定环境测的Chromium、1280×720、DPR 1见 playwright.config.ts。你本地若开了浏览器扩展、多开了标签页或屏幕缩放不同帧率自然偏低。先对齐环境再比数字才有意义。内存测试总是超阈值怎么办内存断言对 GC 时机很敏感e2e/memory/util.ts 会反复 collectGarbage 直到堆稳定。若仍超阈值优先怀疑销毁时没解绑监听或定时器可打开 takeHeapSnapshot 生成的快照对比操作前后的对象差集。我只改了样式为什么滚动 FPS 掉了样式变更会触发重绘重绘进渲染循环就会拖低帧率。用 e2e/perf/scroll.spec.ts 输出的 medianFrameTime 找最大帧耗时通常能定位到哪次重绘最贵再针对性地缩小重绘范围。定标准、压场景、调优三步走完Univer 的性能就从感觉卡变成了50 FPS 达标 / 200KB 达标这样的可断言结论。下一步挑一个你最担心的场景今天就把它跑起来把 test-results/ 里的数字截图存档作为你后续改动的基线。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考