Googleの「タコメーター」でDiscourseのJSパフォーマンス変化を測定

ドキュメント 開発者ガイド
1

Discourse のコア、プラグイン、テーマでクライアントサイドの開発を行う際には、パフォーマンスへの影響を考慮することが重要です。Google の ‘Tachometer’ プロジェクトは、統計的に厳密なベンチマークツールを提供しており、変更の影響を決定論的に測定するために使用できます。

基本的に、このツールは URL のリストを受け取り、それらを「ラウンドロビン」方式で読み込みます。各ページの読み込みごとにパフォーマンスの測定値を取得します。数百回から数千回の反復処理の後、比較表を生成します。

この「ラウンドロビン」方式の利点は、測定値への外部要因の影響を軽減する点にあります。

ステップ 1: performance.measure() の追加

ここでのアプローチは、テスト対象によって異なりますが、根本的には、Tachometer が読み取るための performance.measure() 値を導入する必要があります。

Discourse の起動とレンダリングにかかる時間を計測したい場合は、組み込みの “discourse-init-to-paint” 測定値を使用できます。それ以外のものについては、独自の performance.measure を導入して使用できます。

ブラウザの開発者ツールのパフォーマンスタブを使用して、それが正常に動作していることを確認できます:

SCR-20240529-rlhj
SCR-20240529-rlhj1234×176 5.86 KB

ユーザーの操作（例: メニューの展開）を伴うアクティビティを計測しようとしている場合、イニシャライザーに以下のようなコードを追加し、ページ読み込み後 1 秒でボタンをクリックさせることで実現できます:

setTimeout(() => document.querySelector(".my-button").click(), 1000);

ステップ 2: テスト用の URL の特定

まず、Ember アセットを本番モードでビルドしていることを確認してください。これは、EMBER_ENV=production を指定してサーバーを起動することで実現できます。

2 つの異なる URL を取得するには、主に 2 つのアプローチがあります:

変更が小さく、容易にフィーチャーフラグで制御できる場合は、URL クエリパラメータに基づいて切り替えるロジックを追加できます。その場合、2 つの URL は以下のような形になります。

http://localhost:3000?flag=before
http://localhost:3000?flag=after

変更が大きすぎてそれができない場合は、git worktree を作成し、別のポートで rails の 2 番目のコピーをそこから起動できます:

git worktree add ../discourse-after my-branch
cd ../discourse-after
bundle install
pnpm install
EMBER_ENV=production UNICORN_PORT=3001 bin/dev

両方のコピーは同じデータベースと Redis を共有するため、片方のブランチにのみ存在するマイグレーションがないことを確認してください。

そして、2 つの URL は以下になります。

http://localhost:3000
http://localhost:3001

このアプローチを採用する場合、このガイドのステップ 1 で導入したパフォーマンステレメトリが、アプリの両方のコピーに存在していることを確認してください。

ステップ 3: Tachometer の設定

これが私の bench.json ファイルです。各ターゲットに対して 300 サンプルを取得します:

{
  "timeout": 5,
  "sampleSize": 300,
  "benchmarks": [
    {
      "measurement": {
        "mode": "performance",
        "entryName": "discourse-init-to-paint"
      },
      "expand": [
        {
          "url": "http://localhost:3000",
          "name": "before"
        },
        {
          "url": "http://localhost:3001",
          "name": "after"
        }
      ]
    }
  ]
}

ステップ 4: ベンチマークの実行

ノイズを減らすために、ワークステーション上で無関係なアクティビティを停止し、以下のコマンドのようにしてベンチマークを開始します:

pnpx tachometer --config ./bench.json

完了すると、変更前/変更後のパフォーマンスの比較が表示されるはずです。

image
image1500×412 48.9 KB

注意点

このような実験と同様に、限界を考慮する価値があります。例えば:

  • 開発用ワークステーションでのパフォーマンスの差は、他のブラウザ/デバイスに直接反映されない場合があります。
  • 開発モードでの Discourse の起動プロセスは、本番モードとは完全に同じではありません。構造的な変更（例: フレームワークの更新）を行う場合、これは重要になる可能性があります。
  • パフォーマンスはアプリケーションの状態（例: レンダリングされるトピックの数）に基づいて変化する傾向があるため、結果は他の環境では完全に再現できない可能性があります。

このドキュメントはバージョン管理されています - 変更提案は github 上で行ってください。

「いいね！」 17