パフォーマンスビューの使用
パフォーマンス ページはパフォーマンスの診断に役立ちます アプリケーションの問題や UI ジャンク。 このページにはタイミングとパフォーマンスの情報が記載されています アプリケーション内のアクティビティに使用されます。 これは、識別に役立ついくつかのツールで構成されています。 アプリのパフォーマンス低下の原因:
- Flutter フレーム チャート (Flutter アプリのみ)
- フレーム分析タブ (Flutter アプリのみ)
- ラスター統計タブ (Flutter アプリのみ)
- タイムライン イベント トレース ビューア (すべてのネイティブ Dart アプリケーション)
- 高度なデバッグ ツール (Flutter アプリのみ)
パフォーマンス ビューでは、次のインポートとエクスポートもサポートされています。 データのスナップショット。詳細については、 をチェックしてください輸入と輸出セクション。
Flutter のフレームとは何ですか?
Flutter は 1 秒あたり 60 フレームで UI をレンダリングするように設計されています (fps)、または 120Hz 更新が可能なデバイスでは 120 fps。 各レンダリングは と呼ばれます。フレーム。 これは、約 16 ミリ秒ごとに UI が更新されることを意味します。 アニメーションやその他の変更を UI に反映します。フレーム レンダリングに 16 ミリ秒以上かかるとジャンクが発生します (ぎくしゃくした動き) が表示デバイスに表示されます。
flutterフレームチャート
このチャートには、アプリケーションの Flutter フレーム情報が含まれています。 チャートに設定された各バーは、単一の flutter フレームを表します。 バーは、さまざまな部分を強調表示するために色分けされています。 Flutter フレームのレンダリング時に発生する作業: UI スレッドとラスター スレッドからの作業 (以前は知られていた) GPU スレッドとして）。
このチャートには、 flutter フレームのタイミング情報が含まれています。 応用。グラフ内の各バーのペアは、単一のバーを表します。 flutterフレーム。このチャートからフレームを選択するとデータが更新されます それは以下に表示されますフレーム解析タブ またはタイムラインイベントタブ。 (現在開発ツール 2.23.1、ラスター統計はフレームごとのデータを持たないスタンドアロン機能です)。
flutter フレーム チャートは、新しいフレームが作成されると更新されます。 アプリ内に描画されます。このグラフの更新を一時停止するには、 チャートの右側にある一時停止ボタンをクリックします。 このグラフは折りたたんで表示スペースを増やすことができます 以下のデータをクリックして、 flutterフレームチャートの上のボタン。
各 Flutter フレームを表す 2 つのバーは色分けされています。 レンダリング時に発生する作業のさまざまな部分を強調表示するため Flutter フレーム: UI スレッドから動作し、ラスター スレッドから動作します。 (以前は GPU スレッドとして知られていました)。
UI
UI スレッドは Dart VM で Dart コードを実行します。これも アプリケーションと Flutter フレームワークのコード。 アプリがシーンを作成して表示するとき、UI スレッドは レイヤーツリー、デバイスに依存しない軽量オブジェクト ペイント コマンドを実行し、レイヤー ツリーをラスター スレッドに送信します。 デバイス上でレンダリングされます。するいいえこのスレッドをブロックします。
ラスター
ラスター スレッド (以前は GPU スレッドとして知られていました) Flutter Engine からグラフィックス コードを実行します。 このスレッドはレイヤー ツリーを取得し、話しかけることでそれを表示します。 GPU (グラフィック プロセッシング ユニット)。直接アクセスすることはできません ラスター スレッドまたはそのデータ、ただしこのスレッドが遅い場合は、 それは Dart コードで何かを行った結果です。 Skia (グラフィックス ライブラリ) はこのスレッドで実行されます。インペラ(iOS の安定したチャネル内) もこのスレッドを使用します。
シーンによっては、簡単に構築できるレイヤー ツリーが生成される場合があります。
ただし、ラスター スレッドでレンダリングするにはコストがかかります。この場合、あなたは、
コードの動作が原因となっているものを把握する必要がある
コードのレンダリングが遅くなります。特定の種類のワークロードはさらに多くの
GPUにとっては難しい。不必要な呼び出しが含まれる可能性があります。saveLayer()、複数のオブジェクトと交差する不透明度、
特定の状況でのクリップまたはシャドウ。
プロファイリングの詳細については、次を参照してください。GPU グラフの問題の特定。
ジャンク（遅いフレーム）
フレーム レンダリング チャートには、ジャンクが赤いオーバーレイで表示されます。 以上の時間がかかる場合、フレームはジャンクであるとみなされます。 完了までに約 16 ミリ秒かかります (60 FPS デバイスの場合)。次のフレーム レンダリング レートを達成するには、 60 FPS (フレーム/秒)、各フレームは次の速度でレンダリングする必要があります。 ～16ミリ秒以下。この目標を逃した場合、次のような可能性があります。 UI のジャンクやフレームのドロップが発生します。
アプリのパフォーマンスを分析する方法の詳細については、 チェックアウト flutterパフォーマンスプロファイリング。
シェーダーのコンパイル
シェーダーのコンパイルは、シェーダーが Flutter で最初に使用されるときに行われます。 アプリ。シェーダコンパイルを実行するフレームは暗くマークされます 赤：
シェーダーのコンパイル ジャンクを減らす方法の詳細については、 チェックアウトモバイルでのシェーダーコンパイルのジャンクを軽減する。
フレーム解析タブ
ジャンキーなフレームの選択 (遅い、赤色) 上の Flutter フレーム チャートはデバッグのヒントを示しています [フレーム分析] タブ。これらのヒントは診断に役立ちます アプリ内でジャンクが発生し、負荷の高い操作を通知します それがフレーム時間の遅さに寄与している可能性があることを検出しました。
ラスター統計タブ
ジャンクしている Flutter フレームがある場合 ラスター スレッドの時間が遅い場合、このツールは可能かもしれません パフォーマンス低下の原因を診断するのに役立ちます。 ラスター統計を生成するには:
- 表示されているアプリの画面に移動します ラスタースレッドのジャンク。
- クリックスナップショットをとる。
- さまざまなレイヤーとそれぞれのレンダリング時間を表示します。
高価なレイヤーが表示された場合は、アプリ内で Dart コードを見つけてください これがこの層を生成しているので、さらに調査してください。 コードを変更したり、ホットリロードしたり、 新しいスナップショットを作成して、レイヤーのパフォーマンスを確認します。 あなたの変更により改善されました。
タイムラインイベントタブ
タイムライン イベント グラフには、アプリケーションからのすべてのイベント トレースが表示されます。
Flutter フレームワークは、フレームの構築時にタイムライン イベントを発行します。
シーンを描画し、HTTP リクエストのタイミングなどの他のアクティビティを追跡します。
そしてゴミ収集。これらのイベントはタイムラインに表示されます。
dart:developer を使用して独自のタイムライン イベントを送信することもできます。TimelineとTimelineTaskAPI。
トレース ビューアの操作と使用に関するヘルプが必要な場合は、
クリック?タイムライン右上のボタン
イベントタブバー。新しいイベントでタイムラインを更新するには
アプリケーションの場合は、更新ボタンをクリックしてください
(タブ コントロールの右上隅にもあります)。
高度なデバッグツール
トレースの強化
タイムライン イベント グラフでより詳細なトレースを表示するには、 [拡張トレース] ドロップダウンのオプションを使用します。
新しいタイムライン イベントを確認するには、アクティビティを再現します。 トレースしたいアプリ内で、 次に、タイムラインを検査するフレームを選択します。
ウィジェットのビルドを追跡する
見るにはbuild()タイムライン内のメソッド イベント、
を有効にするウィジェットのビルドを追跡するオプション。
ウィジェットの名前はタイムライン イベントに表示されます。
トラックレイアウト
タイムラインでレンダリング オブジェクト レイアウト イベントを確認するには、 を有効にするトラックのレイアウトオプション：
トラックペイント
タイムラインでレンダー オブジェクトのペイント イベントを確認するには、 を有効にするトラックペイントオプション：
さらなるデバッグオプション
レンダリング レイヤーに関連するパフォーマンスの問題を診断するには、 レンダリングレイヤーをオフに切り替えます。 これらのオプションはデフォルトで有効になっています。
アプリのパフォーマンスへの影響を確認するには、 アプリ内でアクティビティを再現します。 次に、フレーム チャートで新しいフレームを選択します。 タイムライン イベントを検査するには レイヤーを無効にした状態。 ラスター時間が大幅に減少した場合、 無効にしたエフェクトの過度の使用が原因である可能性があります アプリで見たジャンクに。
- レンダークリップレイヤー
- クリッピングが過度に使用されているかどうかを確認するには、このオプションを無効にします。 パフォーマンスに影響を与えています。 このオプションを無効にするとパフォーマンスが向上する場合、 アプリ内でのクリッピング効果の使用を減らすようにしてください。
- レンダリングの不透明度レイヤー
- かどうかを確認するには、このオプションを無効にします。 不透明度効果を過度に使用すると、パフォーマンスに影響を及ぼします。 このオプションを無効にするとパフォーマンスが向上する場合、 アプリ内での不透明効果の使用を減らすようにしてください。
- 物理的形状レイヤーのレンダリング
- 過剰かどうかを確認するには、このオプションを無効にします 物理モデリング効果の使用がパフォーマンスに影響を及ぼしている、 影や標高など。 このオプションを無効にするとパフォーマンスが向上する場合、 アプリ内での物理モデリング効果の使用を減らすようにしてください。
輸入と輸出
DevTools は、パフォーマンス スナップショットのインポートとエクスポートをサポートしています。 エクスポート ボタン (右上隅) をクリックします。 フレーム レンダリング チャート) 上の現在のデータのスナップショットをダウンロードします。 パフォーマンスページ。パフォーマンス スナップショットをインポートするには、 任意のページから DevTools にスナップショットを取り込むことができます。DevTools のみに注意してください 元は DevTools からエクスポートされたファイルのインポートをサポートします。
その他のリソース
アプリのパフォーマンスを監視する方法を学び、 DevTools を使用してジャンクを検出し、ガイド付きのガイドを確認してくださいパフォーマンス ビューのチュートリアル。