Firefox の開発ツール: メモリ使用とパフォーマンスの調査
N. Shimizu / @chikoski
• Mozilla Japan
• html5j Web プラットフォーム部、 html5j ゲーム部
Mozilla コードリーディング
• https://slideshare.net/chikoski/
• プログラミング言語 / 意味論、ベイジアン、サッカー
今日の資料
• スライド:
https://www.slideshare.net/chikoski/20160601-devtools/
• デモ:
https://chikoski.github.io/devtools-performance/
• サンプルコード:
https://github.com/chikoski/devtools-performance/
• アンケート: http://goo.gl/forms/8IfyYQJRlXh3Uv7m1
パフォーマンスチューニングのステップ
1. 重たい箇所をリストアップする
2. 実際のパフォーマンスを測定する
3. パフォーマンスボトルネックを調査する
4. ボトルネックへの対応策を考える
5. 対応策を実装する
6. 効果を測定する
今日のテーマ
1. 重たい箇所をリストアップする
2. 実際のパフォーマンスを測定する
3. パフォーマンスボトルネックを調査する
4. ボトルネックへの対応策を考える
5. 対応策を実装する
6. 効果を測定する
パフォーマンスツール:フレームレートグラフ
• 応答性能に関する指標
• FPS (Frame Per Second) の推移がグラフで表示されている
• 最高値、最大値、平均値も表示されている
• 大きく下がっている部分は「重たくなってる」とユーザが感じる部分
パフォーマンスツール:呼び出しツリーは展開できる
• Row</fill が全処理時間の 35.21% を消費
• 呼び出しパスを確認出来る(Klass.define → Row</<.initialize → Row</fill)
Paint Flashing Tool:設定から有効にする
1. 開発ツール右上にある歯車アイコンをクリックして設定画面を表示 2.「描画された領域を強調表示します」にチェックを入れる 3.開発ツール右上に「はけ」のようなアイコンが表示される
メモリツール:スナップショットの取得、削除、比較
• ツール左側でスナップショットを管理する
• 取得:カメラアイコンをクリック
• 削除:スナップショット横の×ボタンクリック
• JSON出力:保存ボタンをクリック
• スナップショットは複数取得できる
• タイムスタンプと、使用メモリの総量がわかる
メモリツール:Tree Map 表示
• プルダウンを「Tree Map」に設定すると表示できる
• メモリの量をツリーマップで概観できる
• どういう種類のデータが大きい領域を使っているのかを、なんとなく眺めるのに便利
メモリツール:ドミネータ表示
• プルダウンを「ドミネータ」に設定すると表示できる
• GCルートからの参照 / 被参照 関係が図示される
• GCされるはずのオブジェクトを参照しているオブジェクトを探すのに便利
GCルートから到達できないオブジェクトはGC対象になる
• GCルートからの到達可能性の有無によって、GCするかどうかを決定している
• 赤い部分はAが参照されなくなることによって、到達可能性が失われる
• 赤い部分に対するAのことをドミネータノード(支配ノード)と呼ぶ
メモリツール:保持サイズとシャローサイズ
• シャローサイズ:オブジェクト自身の大きさ
• 保持サイズ:
• シャローサイズと、それが参照するオブジェクトの保持サイズの総計
• オブジェクトが消えたときに解放されるメモリサイズの目安
メモリツールの使うときのイメージ
• 表示を切り替えながら調査する
• まずはTree Map で大体のところをつかむ
• 統計みるなら総計、参照関係をみるならドミネータ
• 割り当てスタックを記録しておいた方が、なにかと便利
• 総計:どの関数がオブジェクトを生成しているのかを調査できる
• ドミネータ:この関数で生成されたオブジェクトを参照しているのは
何かを調査できる
メモリツール:割り当てスタックを記録
• グループ化の欄を「Inverted Call Stack」に設定する
• オブジェクトを生成した関数ごとにグループ化して表示する
• オブジェクトをたくさん生成する関数がわかって便利
メモリツール:割り当てスタック記録とドミネータ表示
• ドミネータ表示でラベルを「Call Stack」に設定すると、オブジェクトを生成した関数ごとにまとめて表示される
• その関数で生成されたオブジェクトの参照 / 被参照関係をたどるのに便利