performance-regression-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Performance Regression Testing

性能回归测试

Any change to the render pipeline must prove it does not increase capture time. The primary guard is

serializeTimelineDirect.perf.browsertest.ts

, which measures

captureTimelineToDataUri

end-to-end in multiple scenarios.

任何对渲染管道的修改都必须证明不会增加捕获时间。主要的保障手段是

serializeTimelineDirect.perf.browsertest.ts

，它会在多种场景下端到端测量

captureTimelineToDataUri

的性能。

Quick Workflow

快速工作流程

bash

undefined

bash

undefined

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


The test prints `p50`, `p95`, `p99` for each scenario. A fix is acceptable if p95 does not regress. Copy the before/after numbers into the PR description as evidence.

./scripts/browsertest packages/elements/src/preview/rendering/serializeTimelineDirect.perf.browsertest.ts


测试会打印每个场景的`p50`、`p95`、`p99`数值。只要p95没有退化，修改就是可接受的。将修改前后的数值复制到PR描述中作为证据。

What Each Scenario Tests

各场景测试内容

See

serializeTimelineDirect.perf.browsertest.ts

for the current scenario list. Typically: simple HTML, text-heavy content, canvas elements, mixed composition at 1920×1080.

当前的场景列表请查看

serializeTimelineDirect.perf.browsertest.ts

。通常包括：简单HTML、文本密集型内容、canvas元素、1920×1080分辨率下的混合合成内容。

Interpreting the Output

输出结果解读

Each scenario reports:

```
p50
```
/
```
p95
```
/
```
p99
```
timing in ms for
```
serializeMs
```
(serialization only) and
```
totalMs
```
(serialize + image load)
```
dataUriLength
```
as a proxy for output size

Focus on

p95 serializeMs

. Small additions to

SERIALIZED_STYLE_PROPERTIES

add one

getComputedStyle

lookup per element per serialization — negligible unless the composition has thousands of elements.

每个场景会报告：

```
serializeMs
```
（仅序列化）和
```
totalMs
```
（序列化 + 图片加载）的
```
p50
```
/
```
p95
```
/
```
p99
```
耗时（单位：毫秒）
```
dataUriLength
```
，作为输出大小的代理指标

重点关注

p95 serializeMs

。向

SERIALIZED_STYLE_PROPERTIES

中添加少量属性会导致每次序列化时每个元素多一次

getComputedStyle

查询——除非合成内容包含数千个元素，否则影响可以忽略不计。

Relating Perf to Parity Fixes

性能测试与兼容性修复的关联

When fixing a CSS property gap in

SERIALIZED_STYLE_PROPERTIES

Run perf before the fix, note p95
Add the property, re-run perf
If p95 stays within noise (±5%), the fix is safe
If p95 climbs, profile with the
```
profile-tests
```
skill to identify the bottleneck

当修复

SERIALIZED_STYLE_PROPERTIES

中的CSS属性缺口时：

修复前运行性能测试，记录p95数值
添加属性后，重新运行性能测试
如果p95在误差范围内（±5%），则修复是安全的
如果p95上升，使用
```
profile-tests
```
工具分析以确定瓶颈

Broader Perf Tests

更全面的性能测试

For frame-by-frame scrub and full pipeline timing, see:

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

These are slower to run (long iteration counts). Use them when the change is structural (e.g., changing how canvases are encoded or how the DOM is walked), not for individual property additions.

如需逐帧scrub和全管道耗时测试，请查看：

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

这些测试运行速度较慢（迭代次数多）。当修改涉及结构性变化时（例如更改画布编码方式或DOM遍历方式）使用它们，而不是针对单个属性的添加。

When to Use This Skill

何时使用此方法

Before and after any change to
```
serializeTimelineDirect.ts
```
Before merging a parity fix branch
When a parity test starts taking noticeably longer than before

修改
```
serializeTimelineDirect.ts
```
前后
合并兼容性修复分支前
当兼容性测试耗时明显变长时