UIレンダリングの問題の特定
アプリのユーザーインターフェイス（UI）のフレーム生成が遅いと、滑らかさやフレームレートが低下し、ジャンクが発生する可能性があります。ジャンクとはUI動作の途切れや遅延のことで、これにより、アプリの動作が遅くなったり、応答しなくなったりします。滑らかさとは、アプリのインターフェイスがどれだけスムーズかつ高い応答性で動作し、ユーザー入力に反応するかを指します。
スムーズなやり取りには、Vegaアプリの「滑らかさ」主要パフォーマンス指標（KPI）スコアが99%以上であることが必要です。KPIは、アプリが主要な目標をどの程度効果的に達成しているかを示す測定可能な値です。
以下のセクションでは、スムーズなパフォーマンスを実現し、必要な「滑らかさ」KPIスコアを達成するために、アプリのUIレンダリングの問題を特定する方法について説明します。
前提条件
先に進む前に、滑らかさとフォアグラウンドメモリの測定の設定を完了してください。
UIレンダリングのジャンクの特定
Vega App KPI Visualizerで滑らかさのKPIテストを実行すると、システムはUIラグの原因を特定するのに役立つアーティファクトを生成します。これらのアーティファクトには、滑らかさグラフ、CPUプロファイルグラフ、Perfettoトレースが含まれます。
滑らかさグラフの理解
滑らかさグラフは、時間の経過に伴うアプリのレンダリングパフォーマンスを視覚的に表します。グラフを調べるときは、パフォーマンス上の問題が発生している可能性を示す滑らかさの低下がないか確認してください。このような低下は、UIの遅延の原因となる特定のイベントやコードの実行に関連していることがよくあります。
滑らかさの低下の原因を特定するには
- Perfettoトレースの調査
CPUプロファイルグラフの分析
CPUプロファイルグラフには、アプリ内のさまざまな関数に費やされた時間が表示されます。滑らかさグラフにパフォーマンスの問題が表示されたら、タイムスタンプのCPUプロファイルグラフを展開します。展開表示はフレームグラフと呼ばれ、CPUプロファイルを視覚化して、どの関数が最も処理時間を消費しているかを示します。
フレームグラフを折りたたむには
- ルートバーを選択します。
- ビューが展開されたままの場合は、
Developer: Reload Webviewsコマンドパレットを使用してください。
Perfettoトレースを使用した作業
Perfettoは、パフォーマンスへの影響を最小限に抑えながらシステムトレースを記録するオープンソースツールです。滑らかさテストを開始すると、Perfettoにより、テスト対象のVegaデバイスでトレースが自動的に収集されます。テストが完了すると、トレースファイルがワークステーションにダウンロードされます。
トレースファイルはテスト出力ディレクトリにあります。各ファイルの形式は以下のとおりです。
iter_<イテレーション番号>_vs_trace.protobuf
サンプルファイル：iter_3_vs_trace.protobuf
テスト中のシステムの動作を分析するには
- Perfetto UIでトレースファイルを開きます。
- UIレンダリングの問題を特定するには、
Toolkit/Renderスレッドのトレースを調査します。 - パフォーマンスの低下を引き起こす可能性のある長期または繰り返しのイベントを探します。
ジャンクの一般的な原因と解決策
フレームサイズの不一致
フレームをレンダリングする際、システムはビットマップをOpenGLテクスチャとしてGPU（グラフィックス処理装置）に読み込みます。OpenGLテクスチャはグラフィックのレンダリングに使用される画像で、通常はGPUのメモリに保存されます。
フレームサイズとディスプレイ解像度が一致しない場合、次のことが起こります。
- GPUはフレームピクセルをディスプレイにマップする必要があります。
- フレームがディスプレイよりも大きい場合は、必要以上のピクセルがGPUに読み込まれます。
このような不一致は、パフォーマンスを低下させ、レンダリング時間を浪費する可能性があります。
フレームサイズの不一致を調査するには
- Perfetto（システムトレース）で、遅延が見つかった時点付近の
Tools/Renderスレッドを探します。 - レンダリングプロセスに遅延がないかどうかを確認します。
- フレームの幅と高さがターゲットデバイスのディスプレイサイズと一致していることを確認します。
フレームのオーバードロー
フレームのオーバードローは、アプリが1つのフレーム内で同じピクセルを複数回レンダリングするときに発生し、計算リソースを浪費します。これは、アプリが最初に画面をクリアせず、以前に描画したオブジェクトの上に新しいオブジェクトを描画したことが原因で発生します。
アプリのオーバードローを検出するには
- オーバードローの検出の手順に従ってください。
React Native Systraceによるカスタムトレースの追加
Vega SDKではReact Native Systrace API（英語のみ）がサポートされています。これにより、トレースマーカーを追加したり、アプリのソースコード内で行われる関数呼び出し間の経過時間を測定したりできます。カスタムトレースを使用すると、コードの特定の部分におけるパフォーマンスの問題を見つけやすくなります。
次のコードブロックは、トレースマーカーの追加方法を示しています。
const App = () => {
const setCustomTrace = () => {
Systrace.setEnabled(true); // setEnabledを呼び出してプロファイリングを有効にします。
Systrace.beginEvent('custom_label');
Systrace.counterEvent('custom_label', 10);
};
...
const functionToTrace = () => {
...
enableProfiling()
...
};
}
カスタムトレースは、アプリ内で多くの時間を消費している関数やコードの特定に役立ちます。ただし、カスタムトレースを追加する際は慎重を期する必要があります。不用意な実装により誤検出が発生すると、オーバーヘッドの増大につながる可能性があります。
ベストプラクティス
ジャンクの発生やレンダリングの遅延を避けるため、アプリのパフォーマンスに関するベストプラクティスのVegaアプリガイドラインに従ってください。
関連トピック
Last updated: 2025年9月30日
