Talk material explaining how to improve your apps' performance with Firefox Developer Edition

1. Firefoxの開発ツール：
メモリ使用とパフォーマンスの調査

2. N.Shimizu/ @chikoski
• Mozilla Japan
• html5j Web プラットフォーム部、 html5j ゲーム部
Mozilla コードリーディング
• https://slideshare.net/chikoski/
• プログラミング言語 / 意味論、ベイジアン、サッカー

3. 今日の資料
• スライド：
https://www.slideshare.net/chikoski/20160601-devtools/
• デモ：
https://chikoski.github.io/devtools-performance/
• サンプルコード：
https://github.com/chikoski/devtools-performance/
• アンケート： http://goo.gl/forms/8IfyYQJRlXh3Uv7m1

4. パフォーマンスチューニングのステップ
1. 重たい箇所をリストアップする
2. 実際のパフォーマンスを測定する
3. パフォーマンスボトルネックを調査する
4. ボトルネックへの対応策を考える
5. 対応策を実装する
6. 効果を測定する

5. 今日のテーマ
1. 重たい箇所をリストアップする
2. 実際のパフォーマンスを測定する
3. パフォーマンスボトルネックを調査する
4. ボトルネックへの対応策を考える
5. 対応策を実装する
6. 効果を測定する

6. Firefox Developer Edition

7. パフォーマンス向上のための道具
パフォーマンスツール ネットワークモニタ
メモリツール Paint Flashing Tool

9. 開発ツールの起動

10. パフォーマンスツール
• パフォーマンスを記録して、解析、その結果を表示するツール
• 最初にやることは、パフォーマンスの記録を取ること

11. パフォーマンスツール：タイムライン表示
• 記録を時系列的に表示
• それぞれの処理の長さが帯（マーカーと呼ぶ）で表示される

12. パフォーマンスツール：フレームレートグラフ
• 応答性能に関する指標
• FPS (Frame Per Second) の推移がグラフで表示されている
• 最高値、最大値、平均値も表示されている
• 大きく下がっている部分は「重たくなってる」とユーザが感じる部分

13. パフォーマンスツール：表示期間の選択
• 表示する範囲を、フレームレートグラフ上で選択できる
• FPSが大きく下がっている範囲を選ぶと、何がFPSを下げているのかを調査できる

17. パフォーマンスツール：フレームチャート

18. パフォーマンスツール：呼び出しツリー
• 処理時間を、関数呼び出しごとにまとめたビュー
• 上位にある関数ほど時間がかかっている可能性が高い（呼び出し回数が多い場合もある）

19. パフォーマンスツール：呼び出しツリーは展開できる
• Row</fill が全処理時間の 35.21% を消費
• 呼び出しパスを確認出来る（Klass.define → Row</<.initialize → Row</fill)

23. PaintFlashingTool：描画された領域を強調表示

24. PaintFlashingTool：設定から有効にする
1. 開発ツール右上にある歯車アイコンをクリックして設定画面を表示
2.「描画された領域を強調表示します」にチェックを入れる
3.開発ツール右上に「はけ」のようなアイコンが表示される

25. PaintFlashingTool：使い方
• ハケのアイコンをクリックして、何か操作する
• 同時に描画された部分は、同じ色で表示される
• なるだけ多くの領域が同時に描画されるように修正すると良い

26. 列ごとに描画が行なわれている

28. メモリツール：メモリの使用状況を確認するツール
• スナップショットを取って概要を表示
• ビューを切り替える
• スナップショットの比較

29. メモリツール：スナップショットの取得、削除、比較
• ツール左側でスナップショットを管理する
• 取得：カメラアイコンをクリック
• 削除：スナップショット横の×ボタンクリック
• JSON出力：保存ボタンをクリック
• スナップショットは複数取得できる
• タイムスタンプと、使用メモリの総量がわかる

30. メモリツール：割り当てスタックを記録
• 「割り当てスタックを記録」にチェックを入れてから、アプリを走らせると、
オブジェクトの生成箇所が記録される

31. メモリツール：TreeMap表示
• プルダウンを「Tree Map」に設定すると表示できる
• メモリの量をツリーマップで概観できる
• どういう種類のデータが大きい領域を使っているのかを、なんとなく眺めるのに便利

32. メモリツール：総計表示
• プルダウンを「総計」に設定すると表示できる
• メモリの使用量をグループごとにまとめてランキング表示できる
• メモリをたくさん消費する関数を探すのに便利

33. メモリツール：ドミネータ表示
• プルダウンを「ドミネータ」に設定すると表示できる
• GCルートからの参照 / 被参照 関係が図示される
• GCされるはずのオブジェクトを参照しているオブジェクトを探すのに便利

34. GCルートから到達できないオブジェクトはGC対象になる
• GCルートからの到達可能性の有無によって、GCするかどうかを決定している
• 赤い部分はAが参照されなくなることによって、到達可能性が失われる
• 赤い部分に対するAのことをドミネータノード（支配ノード）と呼ぶ

35. メモリツール：保持サイズとシャローサイズ
• シャローサイズ：オブジェクト自身の大きさ
• 保持サイズ：
• シャローサイズと、それが参照するオブジェクトの保持サイズの総計
• オブジェクトが消えたときに解放されるメモリサイズの目安

36. メモリツールの使うときのイメージ
• 表示を切り替えながら調査する
• まずはTree Map で大体のところをつかむ
• 統計みるなら総計、参照関係をみるならドミネータ
• 割り当てスタックを記録しておいた方が、なにかと便利
• 総計：どの関数がオブジェクトを生成しているのかを調査できる
• ドミネータ：この関数で生成されたオブジェクトを参照しているのは
何かを調査できる

37. メモリツール：割り当てスタックを記録
• グループ化の欄を「Inverted Call Stack」に設定する
• オブジェクトを生成した関数ごとにグループ化して表示する
• オブジェクトをたくさん生成する関数がわかって便利

38. メモリツール：割り当てスタック記録とドミネータ表示
• ドミネータ表示でラベルを「Call Stack」に設定すると、オブジェクトを生成した関数ごとに
まとめて表示される
• その関数で生成されたオブジェクトの参照 / 被参照関係をたどるのに便利

39. まとめ：パフォーマンスチューニングを助ける可視化ツール群

40. Firefox Developer Edition