QMLアプリケーションのプロファイリング

QML Profiler を使えば、アプリケーションの典型的なパフォーマンス問題、例えば、遅い、反応が鈍い、ユーザーインターフェイスがもたつく、などの原因を見つけることができます。典型的な原因としては、JavaScriptの実行フレーム数が少なすぎることが挙げられます。すべてのJavaScriptはGUIスレッドが続行できるようになる前に戻らなければならず、GUIスレッドの準備ができていない場合、フレームは遅延するかドロップされます。

同様のパフォーマンス問題のもう一つの典型的な原因は、不可視アイテムの作成や更新で、GUIスレッドで時間がかかります。

ペイント・メソッドやシグナル・ハンドラなど、長時間実行されるC++関数のトリガーにもGUIスレッドで時間がかかりますが、QML Profiler 、C++コードのプロファイリングが行われないため、よりわかりにくくなっています。JavaScriptの過剰な使用を見つけるには、アニメーションやScene Graphイベントのフレームレートをチェックし、ギャップを探し、アプリケーションが期待通りに動作するかをチェックします。JavaScriptカテゴリには関数の実行時間が表示されますが、1フレームあたり16ミリ秒以下に抑えるようにしましょう。

不可視アイテムの処理に起因する問題を見つけるには、ドロップされたフレームを探し、フレームごとに更新される短いバインディングやシグナルハンドラを使いすぎていないかチェックします。また、Scene Graph のオーバードローを視覚化して、シーンのレイアウトをチェックし、画面の外にあったり、他の見える要素の下に隠れていたりして、ユーザーに決して見えないアイテムを見つけることができます。

JavaScriptが実行されていないにもかかわらずフレームがドロップされ、タイムラインに説明のつかない大きなギャップがある場合、カスタムQQuickItem の実装をチェックしてください。Valgrind Callgrindやその他の汎用プロファイラを使って C++ コードを解析できます。

フルスタック・トレースを使用して、トップレベルのQMLやJavaScriptからC++、そしてカーネル空間までをトレースすることができます。収集したデータは、Chrome Trace Format Viewerで表示できます。

収集したデータの分析

Timeline ビューでは、QML と JavaScript の実行がグラフィカルに表示され、記録されたすべてのイベントが凝縮されて表示されます。

タイムライン(6)の各行は、記録されたQMLイベントの種類を表しています。行のイベント上にカーソルを移動すると、そのイベントにかかる時間や、ソースのどこで呼び出されているのかを確認することができます。イベントが選択されているときだけ情報を表示するには、View Event Information on Mouseover (4)をオフにします。

アウトライン (10) は、データが収集された期間を要約します。ズーム範囲 (8) をドラッグするか、アウトラインをクリックしてアウトライン上を移動します。また、Jump to Previous Event とJump to Next Event (1)を選択して、イベント間を移動することもできる。

Show Zoom Slider (2)を選択すると、ズーム・レベルを設定するスライダーが開きます。ズームハンドルをドラッグすることもできます(9)。デフォルトのズームレベルをリセットするには、タイムラインを右クリックしてコンテキストメニューを開き、Reset Zoom を選択します。

タイムルーラーを選択し、タイムラインに垂直のオリエンテーションライン(5)を追加します。

イベント範囲の選択

イベントのフレームレートを表示し、類似イベントのフレームレートと比較するために、イベント範囲を選択します(7)。Select Range (3)を選択し、選択ツールを起動します。次に、タイムラインをクリックして、イベント範囲の開始を指定します。選択ハンドルをドラッグして、範囲の端を指定します。範囲の長さは、イベントのフレームレートを示します。

2つの後続イベント間の遅延を測定するには、最初のイベントの終了と2つ目のイベントの開始の間にイベント範囲を配置します。Duration フィールドには、イベント間の遅延がミリ秒単位で表示されます。

イベント範囲をズームするには、その範囲をダブルクリックします。

Timeline 、Statistics 、Flame Graph のビューで現在の範囲を絞り込むには、範囲を右クリックし、Analyze Current Range を選択します。全範囲に戻るには、コンテキスト・メニューでAnalyze Full Range を選択します。

イベント範囲を削除するには、Selection ダイアログを閉じます。

データを理解する

一般的に、タイムラインビューのイベントは、QML や JavaScript の実行にかかった時間を示しています。マウスカーソルを合わせると詳細が表示されます。ほとんどのイベントには、ソースコード内の場所、期間、ソースコード自体の関連部分が含まれます。

イベントを選択すると、コードエディターのカーソルが、そのイベントに関連するコードの部分に移動します。

次のタイプのイベントは、タイムライン ビューで 1 行または複数行に表示されます。

シーングラフイベントの分析

シーングラフカテゴリを理解するには、Qt Quick Scene GraphとQt Quick Scene Graph Default Renderer で、Qt Quick シーングラフがどのように動作するかについて詳しく説明しています。Scene Graph カテゴリーでは、以下のイベントが報告されます。すべてのイベントが、すべてのレンダー ループで生成されるわけではありません。Windows と Basic のレンダー ループでは、すべてが同じスレッドで実行され、GUI スレッドとレンダー スレッドの区別は無意味です。

環境変数QSG_RENDER_TIMINGを設定すると、プロファイリング対象のアプリケーションと似ているがわずかに異なるタイミングをテキストで出力します。以下にその違いを示します。

Qt Quick 3Dイベントの分析

以下はQt Quick 3D のイベントのリストです。各レンダリングフレームは、synchronize（同期）、prepare（準備）、 render（レンダリング）の各フェーズから構成され、この順に実行されます。synchronizeはシーングラフの同期フェーズで起こり、prepareとrenderはシーングラフのレンダリングフェーズで起こる。

環境変数QSG_RENDERER_DEBUG=render を設定すると、さまざまなレンダリングパスのレンダーコールカウントの追加テキスト出力が得られる。これらの呼び出し回数は、Render Frameイベントで合計されます。

統計情報の表示

Statistics ビューには、各バインディング、作成、コンパイル、JavaScript、またはシグナル イベントがトリガーされた回数と、それにかかった平均時間が表示されます。どのイベントを最適化すべきかを知るには、統計情報を調べます。発生回数が多い場合は、イベントが不必要にトリガーされている可能性があります。発生時間の中央値、最長時間、最短時間を表示するには、コンテキストメニューからExtended Event Statistics を選択します。

イベントを選択すると、コード・エディタのソース・コードからそのイベントに移動します。

Callers とCallees は、イベント間の依存関係を表示します。Callers は、バインディングのトリガーとなる QML イベントをまとめたものです。Callees はバインディングのトリガーとなるQMLイベントをまとめています。バインディングを変更すると、どの QML イベントが影響を受けるかがわかります。

イベントを選択すると、コードエディターのソースコードからそのイベントに移動します。

Timeline ビューでイベントを選択すると、そのイベントに関する情報がStatistics とFlame Graph ビューに表示されます。

1つのビューまたは行の内容をクリップボードにコピーするには、コンテキストメニューからCopy Table またはCopy Row を選択します。

統計情報を炎グラフで表示する

Flame Graph ビューでは、QML と JavaScript の実行に関する統計的な概要がより簡潔に表示されます。Total Time のビューでは、横棒はすべての JavaScript と QML イベントの実行時間に対して、ある関数のすべての呼び出しにかかった時間を示しています。ネスティングは、どの関数が他の関数から呼び出されたかを示しています。

関数によって割り当てられたメモリの総量を表示するには、ドロップダウンメニューからMemory を選択します。

関数によって実行されたメモリ割り当ての数を表示するには、Allocations を選択します。

ビュー内の項目をダブルクリックすると、そのビューにズームインします。ビューの空の領域をダブルクリックすると、再びズームアウトします。

Timeline のビューとは異なり、Flame Graph のビューでは、QML や JavaScript が全く実行されていない時間スパンは表示されません。したがって、フレームごとの実行時間の分析には適していません。しかし、様々なQMLやJavaScriptのイベントの総影響を見ることは非常に簡単です。