UIレンダリングの問題の特定

​

前提条件

​

UIレンダリングのアーティファクトの特定

​

滑らかさグラフの理解

​

滑らかさの低下の原因を特定する方法

​

CPUプロファイルグラフの分析

​

フレームグラフを折りたたむ方法

1. ルートバーを選択します。
2. ビューが展開されたままの場合は、Developer: Reload Webviewsコマンドパレットを使用してください。

​

Perfettoトレースを使用した作業

iter_<イテレーション番号>_vs_trace.protobuf

​

テスト中のシステムの動作を分析する方法

1. Perfetto UIでトレースファイルを開きます。
2. UIレンダリングの問題を特定するには、Toolkit/Render threadのトレースを調査します。
3. パフォーマンスの低下を引き起こす可能性のある長期または繰り返しのイベントを探します。

​

アーティファクトの一般的な原因と解決方法

​

フレームサイズの不一致

• GPUはフレームピクセルをディスプレイにマップする必要があります。
• フレームがディスプレイよりも大きい場合は、必要以上のピクセルがGPUに読み込まれます。

​

フレームサイズの不一致を調査する方法

1. Perfetto（システムトレース）で、遅延が見つかった時点付近のTools/Renderスレッドを探します。
2. レンダリングプロセスに遅延がないかどうかを確認します。
3. フレームの幅と高さがターゲットデバイスのディスプレイサイズと一致していることを確認します。

​

フレームのオーバードロー

​

アプリのオーバードローを検出する方法

​

React Native Systraceによるカスタムトレースの追加

 const App = () => {
   const setCustomTrace = () => {
     Systrace.setEnabled(true); // setEnabledを呼び出してプロファイリングを有効にします。
     Systrace.beginEvent('custom_label');
     Systrace.counterEvent('custom_label', 10);
   };
   ...
   const functionToTrace = () => {
     ...
     enableProfiling()
     ...
   };
 }

​

ベストプラクティス

​

関連トピック

• ▶️ Perfettoのトレース機能を使ってパフォーマンスの問題をデバッグする方法
• 💬 コミュニティ：UIの滑らかさを向上させる方法
• アプリのパフォーマンスに関するベストプラクティス
• アプリのKPIを測定