电子表格快不快怎么测？Univer性能测试实操指南

电子表格快不快怎么测Univer性能测试实操指南【免费下载链接】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数据量到十万行电子表格滚动就开始掉帧内存还越用越高——问题到底卡在哪这篇文章带你把 Univer 性能测试完整跑一遍从搭建 E2E 测试环境到读懂帧率、内存与实例生命周期的数据再到根据数据做调优全程实操。️ 搭建测试场E2E性能测试怎么跑起来Univer 的性能测试全部基于 Playwright一个浏览器自动化测试框架代码集中在e2e/目录下按测试目的分成了几个子目录e2e/perf/滚动帧率FPS测试e2e/memory/内存泄漏检测e2e/disposing/实例创建与销毁测试e2e/visual-comparison/渲染结果截图比对跑起来一共 5 步照做即可克隆仓库并安装依赖。仓库要求 Node.js 22.18 以上版本包管理器用 pnpmgit clone https://gitcode.com/GitHub_Trending/un/univer cd univer pnpm install安装 Playwright 所需的浏览器测试只跑 Chromium配置见 playwright.config.tspnpm exec playwright install启动 E2E 演示服务。它会构建examples/下的演示页面并在 3000 端口提供服务性能测试里的http://localhost:3000/sheets/页面就是它pnpm dev:e2e另开一个终端运行性能测试。全量跑用pnpm test:e2e只跑某一类可以指定目录比如只看帧率pnpm test:e2e e2e/perf测试结束后结果落在两个地方playwright-report.htmlHTML 报告和test-results/目录失败 trace、内存快照等产物playwright.config.ts 里outputDir指定的就是它。两个小提醒本地调试时浏览器是有头模式方便你肉眼看页面CI 环境会强制单 worker、headless 运行避免机器性能差异干扰数据。跑帧率测试时建议关掉浏览器插件、保证机器内存充足8GB 以上数据才可信。 测的是哪些数据内存、帧率与生命周期三类测试各管一件事帧率管流不流畅内存管漏不漏生命周期管反复开关会不会出事。滚动帧率十万行数据为什么卡帧率测试在e2e/perf/scroll.spec.ts。它的measureFPS函数先在页面里持续派发滚轮事件模拟用户滚动再用requestAnimationFrame浏览器每渲染一帧就会回调一次的接口数帧得到平均 FPS、中位帧耗时和最差的 10 个帧耗时。测试通过createTest函数为不同场景注册用例每个场景设了自己的最低 FPS 要求场景数据特征FPS 阈值空表格滚动无数据纯渲染开销 50冻结窗格滚动冻结行列后滚动 30合并单元格滚动大量合并区域 20数据溢出横向滚动内容超出列宽溢出 50密集样式文本滚动每格都带样式 25Univer 的渲染引擎packages/engine-render/采用 canvas 渲染加虚拟滚动——只绘制可视区域内的单元格这是十万行数据还能滚动的基础。阈值定高定低本质是在说这个场景下用户最多能接受多少卡顿。内存反复加载会不会越吃越多内存测试在e2e/memory/memory.spec.ts。它通过 CDPChrome 调试协议反复触发 GC 后读取JSHeapUsedSizeJS 堆已使用的字节数读法封装在e2e/memory/util.ts的getMetrics里在四个节点各测一次初始实例后、第一次加载释放后、第二次加载释放后、二次实例销毁后。三个关键阈值直接写在文件里const MAX_UNIT_MEMORY_OVERFLOW 1_000_000; // 1MB const MAX_SECOND_INSTANCE_OVERFLOW 200_000; // 200 KB const MAX_UNIVER_MEMORY_OVERFLOW 6_000_000;指标含义上限单元内存溢出连续两次加载并释放数据后内存的增量1MB二次实例溢出第二次创建并销毁实例后内存的增量200KB整体溢出二次销毁后相对初始基线的总增量6MB第一次溢出允许 1MB是给首次加载的代码缓存留的空间而第二次只有 200KB——第二次理应什么都不新增超了基本就是泄漏。生命周期反复开关实例不出错e2e/disposing/disposing.spec.ts做的事很朴素反复调用loadDemoSheet和disposeCurrSheetUnit创建、销毁工作簿单元数据量覆盖 0 行、2000 行、3000 行最后再disposeUniver关掉整个实例。断言只有一个全程没有 pageerror。多工作簿、多工作表频繁切换正是这类用户操作的真实形态——切换快不快看帧率切多了会不会崩、会不会漏看这里。公式计算用单测而不是E2E公式引擎在packages/engine-formula/特点是计算密集、纯逻辑适合用 vitest 做单元测试级别的性能验证tests/formula-integration/就是专门跑公式集成用例的包。想深入调试公式求值链路可以在 VSCode 里直接断点跑 vitest 用例 怎么读测试报告数据怎么看FPS 不达标往哪查e2e/perf/scroll.spec.ts会把三项数据打进控制台fps、medianFrameTime、max10FrameTimes。平均值低整体渲染开销大先查数据量、样式密度平均值还行但max10FrameTimes里出现 50ms 以上的帧偶发卡顿通常是某次滚动触发了重计算比如进入大量合并单元格区域用浏览器 Performance 面板录制滚动过程找长任务失败时 Playwright 会保留 trace配置里是retain-on-failure在test-results/里回放可以精确到每一帧内存快照怎么对比内存测试不达标时光看字节数不够。e2e/memory/memory.spec.ts里的takeHeapSnapshot函数会在关键节点把.heapsnapshot文件写到test-results/await takeHeapSnapshot(client, memory-first.heapsnapshot);拿到文件后拖进 Chrome DevTools 的 Memory 面板对比两份快照的 diff被销毁的 workbook 实例若还被引用着会出现在 Retainers引用链里顺着链路就能定位是谁没解绑事件、没清定时器。生命周期失败怎么读e2e/disposing/的用例挂了报告里会带完整的页面报错堆栈。重点看报错发生在loadDemoSheet还是disposeCurrSheetUnit这一步加载侧出错多为数据或注入问题销毁侧出错多半是某个组件解绑了不存在的监听。配合test-results/里的 trace 回放基本能一步定位。️ 从数据到调优优化建议与持续监控拿到数据后先动哪里滚动卡优先减少每格样式复杂度确认虚拟滚动生效可视区外不应有 canvas 绘制重计算可以挪到 Web Workerexamples/src/preset-sheets-core-with-worker/有现成参考内存涨用 heap 快照确认是真的在用还是忘了释放前者看数据结构后者找监听器和定时器的解绑点公式慢公式解析有 AST 缓存重复计算的公式会命中缓存超大规模计算建议拆批次或放 Worker实例切换出问题对比disposing与memory两个测试的输出判断是崩溃还是泄漏生产环境怎么持续盯住性能E2E 跑一次只是一次。Univer 的做法是把每次 CI 的性能结果上报成趋势数据e2e/utils/report-performance.ts里的reportToPosthog会把perf.sheet.scroll.empty、unit_memory_overflow、univer_memory_overflow等事件连同git_hash一起发到 PostHog 看板。这样每次提交后你都能看到这一版比上一版 FPS 掉了多少、内存溢出涨了没性能回归在合并前就暴露而不是等用户反馈。本地复现某个卡顿问题时最后手段永远是浏览器 Performance 面板录制真实滚动/输入操作看长任务、GC 频率和帧瀑布把 E2E 报告的宏观结论落到具体某一行代码。收尾Univer 的性能测试体系就三件事帧率保证滚动流畅e2e/perf/内存溢出阈值堵住泄漏e2e/memory/反复创建销毁验证生命周期e2e/disposing/全部数据通过reportToPosthog沉淀成可对比的趋势。建议你下一步把pnpm test:e2e的性能用例纳入 CI给 FPS 和内存指标配一条趋势看板——性能问题最怕没人记得上一版是多少。更多背景可以看 官方文档 里的测试与贡献说明。【免费下载链接】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），仅供参考