20160809-performance-tuning

This slide gives us an overview of performance tuning of front-end JavaScript codes with Firefox. Firefox has several useful tools such as performance tool and memory tool, which help us to find bottle necks in our JS codes. This slide also explains how to use these tools integrated inside Firefox: performance tool and memory tools .

Transcript

1. Firefox を使った
 パフォーマンスチューニング .P[JMMB
   +BQBO
   幠宏兰Ⱅ
   
   OTIJNJ[V!NP[JMMBKBQBOPSH
   
   !DIJLPTLJ 䎃剢傈
   ؟؎زػؿؓ٦وٝأ剑黝⻉عٝؤؔٝ
   TVQQPSUFE
   CZ
   .P[JMMB
   +BQBO
   Y
   UFSBUBJM
2. IUUQTHPPHM6*.
3. N. Shimizu / @chikoski • Mozilla Japan • html5j Web プラットフォーム部、 html5j ゲーム部
 Mozilla コードリーディング • https://slideshare.net/chikoski/ • プログラミング言語 / 意味論、ベイジアン、サッカー
4. パフォーマンスチューニングのステップ 1. 重たい箇所をリストアップする 2. 実際のパフォーマンスを測定する 3. パフォーマンスボトルネックを調査する 4. ボトルネックへの対応策を考える 5. 対応策を実装する 6. 効果を測定する
5. 今日のテーマ 1. 重たい箇所をリストアップする 2. 実際のパフォーマンスを測定する 3. パフォーマンスボトルネックを調査する 4. ボトルネックへの対応策を考える 5. 対応策を実装する 6. 効果を測定する
6. Firefox Developer Edition IUUQTXXXNP[JMMBPSHKBSFGPYEFWFMPQFS
7. パフォーマンス向上のための道具 パフォーマンスツール ネットワークモニタ メモリツール Paint Flashing Tool
8. パフォーマンス向上のための道具 パフォーマンスツール ネットワークモニタ メモリツール Paint Flashing Tool
9. نزٕطحؙך珏겲 锃叨חⵃ欽ׅ׷خ٦ٕ +BWB4DSJQU
   ךⳢ椚 ػؿؓ٦وٝأخ٦ٕ ٖ؎،ؐز
   
   䲽歗 ػؿؓ٦وٝأخ٦ٕ
   
   1BJOU
   'MBTIJOH
   5PPM ؖك٦آ؝ؙٖءّٝ ػؿؓ٦وٝأخ٦ٕ
   
   ًٌٔخ٦ٕ طحزٙ٦ؙ طحزٙ٦ٌؙصة
10. 開発ツールの起動 խխך،؎؝ٝ׾ؙٔحؙ
11. パフォーマンスツール • パフォーマンスを記録して、解析、その結果を表示するツール • 最初にやることは、パフォーマンスの記録を取ること
12. パフォーマンスツール：タイムライン表示 • 記録を時系列的に表示 • それぞれの処理の長さが帯（マーカーと呼ぶ）で表示される
13. パフォーマンスツール：フレームレートグラフ • Frame Per Second (FPS): 応答性能に関する指標 • 推移がグラフでわかる • 最高値、最大値、平均値もわかる • 大きく下がっている部分は「重たくなってる」とユーザが感じる部分
14. パフォーマンスツール：表示期間の選択 • 表示する範囲を、フレームレートグラフ上で選択できる • FPSが大きく下がっている範囲を選ぶと、何がFPSを下げているのかを調査できる
16. +4ךⳢ椚
17. +4ךⳢ椚 䲽歗
18. パフォーマンスツール：フレームチャート 5BCMFVQEBUF
    ָⳢ椚儗꟦ך㣐⼱׾⽑׭׷
19. パフォーマンスツール：呼び出しツリー • 処理時間を、関数呼び出しごとにまとめたビュー • 上位にある関数ほど時間がかかっている可能性が高い（呼び出し回数が多い場合もある）　
20. パフォーマンスツール：呼び出しツリーは展開できる • Row</fill が全処理時間の 35.21% を消費 • 呼び出しパスを確認出来る（Klass.define → Row</<.initialize → Row</fill)
21. VQEBUF
    GVODUJPO \
    
    
    JG UIJTCPEZ \
    
    
    
    
    UIJTUBCMFSFNPWF$IJME UIJTCPEZ 
    
    
    ^
    
    
    UIJTCPEZ
    
    EPDVNFOUDSFBUF&MFNFOU UCPEZ 
    
    
    DPOTU
    O
    
    GJC  
    
    
    DPOTPMFMPH AGJC 
    
    \O^A 
    
    
    UIJTUBCMFBQQFOE$IJME UIJTCPEZ 
    
    
    EP3FOEFS UIJTCPEZ
    UIJTNPEFM
    UIJTSPX5FNQMBUF
    UIJTNBY*UFNT 
    
    
    SFUVSO
    UIJTFM
    ^ KTWJFXUBCMFKT
22. VQEBUF
    GVODUJPO \
    
    
    JG UIJTCPEZ \
    
    
    
    
    UIJTUBCMFSFNPWF$IJME UIJTCPEZ 
    
    
    ^
    
    
    UIJTCPEZ
    
    EPDVNFOUDSFBUF&MFNFOU UCPEZ 
    
    
    DPOTU
    O
    
    GJC  
    
    
    DPOTPMFMPH AGJC 
    
    \O^A 
    
    
    UIJTUBCMFBQQFOE$IJME UIJTCPEZ 
    
    
    EP3FOEFS UIJTCPEZ
    UIJTNPEFM
    UIJTSPX5FNQMBUF
    UIJTNBY*UFNT 
    
    
    SFUVSO
    UIJTFM
    ^ KTWJFXUBCMFKT
23. +4ךⳢ椚 䲽歗
24. Paint Flashing Tool：描画された領域を強調表示
25. Paint Flashing Tool：設定から有効にする 1. 開発ツール右上にある歯車アイコンをクリックして設定画面を表示 2.「描画された領域を強調表示します」にチェックを入れる 3.開発ツール右上に「はけ」のようなアイコンが表示される
26. Paint Flashing Tool：使い方 • ハケのアイコンをクリックして、何か操作する • 同時に描画された部分は、同じ色で表示される • なるだけ多くの領域が同時に描画されるように修正すると良い
27. 列ごとに描画が行なわれている
28. +4ךⳢ椚 䲽歗 ($
    ؖك٦آ؝ؙٖءّٝ
29. メモリツール：メモリの使用状況を確認するツール • スナップショットを取って概要を表示 • ビューを切り替える • スナップショットの比較
30. メモリツール：スナップショットの取得、削除、比較 • ツール左側でスナップショットを管理する • 取得：カメラアイコンをクリック • 削除：スナップショット横の×ボタンクリック • JSON出力：保存ボタンをクリック • スナップショットは複数取得できる • タイムスタンプと、使用メモリの総量がわかる
31. メモリツール：割り当てスタックを記録 • 「割り当てスタックを記録」にチェックを入れてから、アプリを走らせると、
 オブジェクトの生成箇所が記録される
32. メモリツール：Tree Map 表示 • プルダウンを「Tree Map」に設定すると表示できる • メモリの量をツリーマップで概観できる • どういう種類のデータが大きい領域を使っているのかを、なんとなく眺めるのに便利
33. メモリツール：総計表示 • プルダウンを「総計」に設定すると表示できる • メモリの使用量をグループごとにまとめてランキング表示できる • メモリをたくさん消費する関数を探すのに便利
34. メモリツール：ドミネータ表示 • プルダウンを「ドミネータ」に設定すると表示できる • GCルートからの参照 / 被参照 関係が図示される • GCされるはずのオブジェクトを参照しているオブジェクトを探すのに便利
35. GCルートから到達できないオブジェクトはGC対象になる "׾⿫撑׃גְ׷㾩䚍חOVMM׾➿Ⰵ " • GCルートからの到達可能性の有無によって、GCするかどうかを決定している • 赤い部分はAが参照されなくなることによって、到達可能性が失われる • 赤い部分に対するAのことをドミネータノード（支配ノード）と呼ぶ
36. メモリツール：保持サイズとシャローサイズ • シャローサイズ：オブジェクト自身の大きさ • 保持サイズ： • シャローサイズと、それが参照するオブジェクトの保持サイズの総計 • オブジェクトが消えたときに解放されるメモリサイズの目安
37. メモリツールの使うときのイメージ • 表示を切り替えながら調査する • まずはTree Map で大体のところをつかむ • 統計みるなら総計、参照関係をみるならドミネータ • 割り当てスタックを記録しておいた方が、なにかと便利 • 総計：どの関数がオブジェクトを生成しているのかを調査できる • ドミネータ：この関数で生成されたオブジェクトを参照しているのは 何かを調査できる
38. メモリツール：割り当てスタックを記録 • グループ化の欄を「Inverted Call Stack」に設定する • オブジェクトを生成した関数ごとにグループ化して表示する • オブジェクトをたくさん生成する関数がわかって便利
39. メモリツール：割り当てスタック記録とドミネータ表示 • ドミネータ表示でラベルを「Call Stack」に設定すると、オブジェクトを生成した関数ごとに まとめて表示される • その関数で生成されたオブジェクトの参照 / 被参照関係をたどるのに便利
40. まとめ：パフォーマンスチューニングを助ける可視化ツール群 نزٕطحؙך珏겲 锃叨חⵃ欽ׅ׷خ٦ٕ +BWB4DSJQU
    ךⳢ椚 ػؿؓ٦وٝأخ٦ٕ ٖ؎،ؐز
    
    䲽歗 ػؿؓ٦وٝأخ٦ٕ
    
    1BJOU
    'MBTIJOH
    5PPM ؖك٦آ؝ؙٖءّٝ ػؿؓ٦وٝأخ٦ٕ
    
    ًٌٔخ٦ٕ طحزٙ٦ؙ➙㔐כ㼎韋㢩 طحزٙ٦ٌؙصة
41. Firefox Developer Edition IUUQTXXXNP[JMMBPSHKBSFGPYEFWFMPQFS