mcpField
P
performance-regression-testing

performance-regression-testing

github.com/editframe测试与质量1970 次安装2 周前更新
代码仓库

关于 performance-regression-testing

Performance Regression Testing 是用于检查渲染管线改动是否增加捕获耗时的技能。它说明了浏览器测试流程、百分位耗时指标，以及何时应运行范围更广的性能测试。

主要功能

  1. 01运行捕获耗时浏览器基准测试
  2. 02比较 p50、p95 和 p99 耗时
  3. 03跟踪序列化与总耗时
  4. 04评估 CSS 属性一致性修复
  5. 05结构性改动时使用更广泛的测试

适用场景

  1. 01测量渲染改动前后的性能
  2. 02检查 CSS 一致性修复对 p95 的影响
  3. 03调查一致性测试变慢的原因
  4. 04基准测试画布或 DOM 结构性改动

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/editframe/skills --skill performance-regression-testing

安装后在 Claude Code 中输入/performance-regression-testing确认已加载。

详细介绍

性能回归测试

渲染管线的任何变更都必须证明不会增加捕获时间。主要防护测试是 serializeTimelineDirect.perf.browsertest.ts，它会在多种场景下端到端测量 captureTimelineToDataUri。

快速工作流

# Before making changes — record baseline numbers from the terminal output
cd elements
./scripts/browsertest packages/elements/src/preview/rendering/serializeTimelineDirect.perf.browsertest.ts

# Make your changes, then re-run
./scripts/browsertest packages/elements/src/preview/rendering/serializeTimelineDirect.perf.browsertest.ts

测试会打印每种场景的 p50、p95 和 p99。如果 p95 没有退化，则修复可以接受。将前后数据复制到 PR 描述中作为证据。

各场景的测试内容

当前场景列表请参阅 serializeTimelineDirect.perf.browsertest.ts。通常包括：简单 HTML、文本密集型内容、canvas 元素，以及 1920×1080 的混合构图。

解读输出

每种场景会报告：

  • serializeMs（仅序列化）和 totalMs（序列化 + 图像加载）的 p50 / p95 / p99 耗时，单位为 ms
  • dataUriLength，作为输出大小的参考

重点关注 p95 serializeMs。向 SERIALIZED_STYLE_PROPERTIES 添加少量属性，会使每个元素在每次序列化时多进行一次 getComputedStyle 查询——除非构图包含数千个元素，否则影响可以忽略不计。

性能测试与一致性修复的关系

修复 SERIALIZED_STYLE_PROPERTIES 中 CSS 属性缺失的问题时：

  1. 修复前运行性能测试，记录 p95
  2. 添加属性后重新运行性能测试
  3. 如果 p95 的变化在噪声范围内（±5%），则说明修复安全
  4. 如果 p95 上升，使用 profile-tests skill 分析瓶颈

更全面的性能测试

逐帧拖动和完整管线计时测试请参阅：

  • canvas-scrub-performance.browsertest.ts
  • renderPipeline.perf.browsertest.ts

这些测试运行较慢（迭代次数较多）。当变更涉及结构调整时（例如，更改 canvas 的编码方式或 DOM 遍历方式），请使用这些测试；单独添加属性时无需使用。

何时使用此技能

  • 修改 serializeTimelineDirect.ts 前后
  • 合并一致性修复分支前
  • 一致性测试开始明显比之前耗时时

评论

支持 Markdown