mcpField
P
performance-regression-testing

performance-regression-testing

github.com/editframeテスト・品質1970 回インストール2 週間前に更新
リポジトリ

performance-regression-testing について

Performance Regression Testingは、レンダリングパイプラインの変更でキャプチャ時間が増加しないか確認するスキルです。ブラウザテストの手順、パーセンタイル計測値、より広範な性能テストを使う場面を説明します。

主な機能

  1. 01キャプチャ時間のブラウザベンチマーク
  2. 02p50、p95、p99の時間比較
  3. 03シリアライズ時間と合計時間の記録
  4. 04CSSプロパティの再現性修正の評価
  5. 05構造変更向けの広範なテスト

活用シーン

  1. 01レンダリング変更の前後で性能を測定
  2. 02CSSの再現性修正がp95に与える影響を確認
  3. 03再現性テストの遅延原因を調査
  4. 04Canvasや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 の所要時間
  • 出力サイズの目安となる dataUriLength

p95 serializeMs を重視してください。SERIALIZED_STYLE_PROPERTIES に少しプロパティを追加しても、シリアライズごとに要素あたり getComputedStyle の検索が 1 回増えるだけです。構成に数千の要素が含まれない限り、影響はごくわずかです。

パリティ修正とパフォーマンスの関係

SERIALIZED_STYLE_PROPERTIES の CSS プロパティの不足を修正する場合は、次の手順に従ってください。

  1. 修正前にパフォーマンステストを実行し、p95 を記録します
  2. プロパティを追加し、パフォーマンステストを再実行します
  3. p95 が計測誤差（±5%）の範囲内であれば、修正に問題はありません
  4. p95 が増加した場合は、profile-tests スキルを使ってプロファイリングし、ボトルネックを特定します

そのほかのパフォーマンステスト

フレームごとのスクラブとパイプライン全体の所要時間については、次を参照してください。

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

これらのテストは実行に時間がかかります（反復回数が多いため）。キャンバスのエンコード方法や DOM の走査方法の変更など、構造に関わる変更の場合に実行してください。個々のプロパティを追加する場合には実行不要です。

このスキルを使うタイミング

  • serializeTimelineDirect.ts に変更を加える前と後
  • パリティ修正のブランチをマージする前
  • パリティテストの所要時間が以前より明らかに長くなったとき

コメント

Markdown 対応