この翻訳は不完全です。英語から この記事を翻訳 してください。

コールツリーは、どの JavaScript 関数がもっともブラウザで時間をかけているかを示します。この結果を分析すると、コードのボトルネック (ブラウザが不相応に多くの時間をかけている場所) を見つけることができます。

これらのボトルネックは、最適化により最大の効果を得られる場所です。

コールツリーは、サンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。

本記事では、例としてシンプルなプログラムから出力した結果を使用します。自身のプロファイルで実験するためにプログラムを取得したい場合は、こちらをご覧ください。ここで言及するプロファイルはこちらにあります。読み進めるために、インポートしてください。

プログラムの構造を説明するページはこちらです。

なおフレームチャートのドキュメントページでも、同じプログラムおよび同じプロファイルを使用しています。

以下のスクリーンショットはバブルソート、選択ソート、クイックソートの 3 種類のソートアルゴリズムを比較するプログラムの出力です。整数の乱数を埋めた配列をいくつか生成して、それぞれのアルゴリズムで順にソートします。

記録内で長い JavaScript マーカーを示している部分をズームインしました:

コールツリーは、表形式で結果を表示します。それぞれの行は 1 個以上のサンプルを取得した関数を表し、これらの行は関数内で取得したサンプル数の降順で並べられます。

Samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function).

Total Time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. These numbers should roughly be the same as the number of samples.

Total Cost is that number as a percentage of the total number of samples in the selected portion of the recording.

Self Time is calculated as the time spent in that particular function, excluding its children. This comes from the captured stacks where this function is the leafmost function.

Self Cost is calculated from Self Time as a percentage of the total number of samples in the selected portion of the recording.

In the current version of the Call Tree, these are the most important columns. Functions with a relatively high Self Cost are good candidates for optimization, either because they take a long time to run, or because they are called very often.

The inverted call tree is a good way to focus on these Self Cost values.

This screenshot tells us something we probably already knew: Bubble sort is a very inefficient algorithm. We have about six times as many samples in bubble sort as in selection sort, and 13 times as many as in quicksort.

 

コールツリーを渡り歩く

各関数名の隣に、展開用の矢印があります。クリックすると、サンプルを取得した関数からルートに向けて、コールツリーを戻るパスを確認できます。例えば、bubbleSort() のエントリを展開します:

コールグラフは以下のとおりであるとわかります:

sortAll()

    -> sort()

        -> bubbleSort()

ここで sort()コスト は 1.45% であり、これはリストの後方にある個別の sort() の値と同じであることに注意してください。これは、一部のサンプルが呼び出した関数内ではなく sort() 自身で取得されたことを表します。

トップレベルへ戻るパスが複数存在することがあります。swap() のエントリを展開してみましょう:

swap() 内で 253 個のサンプルを取得しました。しかし swap() は 2 つの異なるパスで到達しています。bubbleSort()selectionSort() が使用しています。swap() の 253 サンプルのうち 252 個は bubbleSort() の枝で、また 1 個だけ selectionSort() の枝で取得したこともわかります。

これは、私たちが考えていた以上にバブルソートの効率が低いということです! 自身以外に 252 サンプル、または総コストのほぼ 10% を抱えています。

このような探求によりコールグラフ全体を、関連付けられたサンプル数とともに明らかにできます:

sortAll()                         //    8

    -> sort()                     //   37

        -> bubbleSort()           // 1345

            -> swap()             //  252

        -> selectionSort()        //  190

            -> swap()             //    1

        -> quickSort()            //  103

            -> partition()        //   12

プラットフォームのデータ

Gecko入力とイベントなどと記載された行がいくつかあるでしょう。これらは内部のブラウザ呼び出しを表します。

これらも役に立つ情報です。あなたのサイトがブラウザを懸命に働かせている場合、あなたのコードではサンプルが記録されないかもしれませんが、問題は残されています。

本記事の例では、679 個のサンプルが Gecko に割り当てられており、bubbleSort() に次いで 2 番目に大きいグループです。これを展開してみましょう:

これは 614 個のサンプル、または総コストの役 20% が sort() の呼び出しに由来することを表します。sort() のコードを見ると、プラットフォームのデータの高いコストの理由は console.log() を繰り返し呼び出しているためであることが明白でしょう:

function sort(unsorted) {
  console.log(bubbleSort(unsorted));
  console.log(selectionSort(unsorted));
  console.log(quickSort(unsorted));
}

より効率がよい実装方法を検討することは、間違いなく有益でしょう。

ここでわかることとして、アイドル時間は Gecko として分類されますので、プロファイル内で JavaScript を実行していない部分は Gecko のサンプルが増えます。これらはサイトのパフォーマンスとは関係がありません。

デフォルトで、コールツリーはプラットフォームのデータを個別の関数に分割しません。これは大量のノイズを加えてしまうことと、Firefox 自体に取り組んでいる人々以外には役立たないと思われるためです。これらの詳細を確認したい場合は、設定で "Gecko プラットフォームのデータを表示" にチェックを入れてください。

 

Using an inverted, aka Bottom-Up, Call Tree

An inverted call tree reverses the order of all stacks, putting the leafmost function calls at the top. The direct consequence is that this is a view that focuses more on the function's Self Time information. This is a very useful view to find some hot spot in your code.

To display this view, click the gear icon on the right-hand end of the performance tab and select Invert Call Tree.

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, wbamberg, chikoski, yyss
最終更新者: silverskyvicto,