Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improve SPA Performance with Angular App

Bbd6b9dc6b12f8cc4d2c0e9b40ec1cdb?s=47 mana
June 21, 2017

Improve SPA Performance with Angular App

Tips on improving performance of SPA using Angular.
- JavaScript memory leak
- AngularJS / Angular2 performance
- New Relic Browser
- UI / UX improvement

Bbd6b9dc6b12f8cc4d2c0e9b40ec1cdb?s=128

mana

June 21, 2017
Tweet

Transcript

  1. 1 SPAアプリの パフォーマンス改善入門 with Angular HRMOS事業部 プロダクト開発 フロントエンドエンジニア 黒田学人

  2. 2 自己紹介

  3. 3 黒田学人... • Web系の受託会社 ◦ LAMP ◦ Backbone.js • Vancouver

    / Canada ◦ Art School ▪ デザイン学んだり ▪ 仕事したり • BizReach ◦ HRMOS事業部 フロントエンドエ ンジニア ◦ Angular
  4. 4 フロントエンドの パフォーマンス改善とは

  5. 5 パフォーマンスはUXの重要な要素

  6. 6 ユーザー第一に考える

  7. 7

  8. 8 RAILパフォーマンスモデル

  9. 9 • R : Responseは100ms未満になるように • A : Animationは16ms毎になるように •

    I : Idleは100ms未満で起きるように • L : Loadは1000ms未満に終わるように
  10. 10 • ページのロードから表示されるまで ◦ データダウンロード ◦ レンダリングツリーのレイアウト • ページが表示されてからの動き ◦

    レンダリングツリーのレイアウト、ペイント ◦ ユーザーのアクション ◦ JavaSriptの実行コスト
  11. 11 • ページのロードから表示されるまで ◦ データダウンロード ◦ レンダリングツリーのレイアウト • ページが表示されてからの動き ◦

    レンダリングツリーのレイアウト、ペイント ◦ ユーザーのアクション ◦ JavaSriptの実行コスト
  12. 12 ユーザーの使い心地にフォーカス

  13. 13 ブラウザはなぜ遅くなるのか?

  14. 14 Scriptに負荷がかかると遅い

  15. 15

  16. 16 JavaScriptのメモリリーク

  17. 17 • 不要になったオブジェクトがメモリ領域に存在するこ と • メモリ領域が圧迫されることで、ブラウザの実行速 度が著しく低下する • メモリの回収はGCが動いた時 •

    リロードしたからって全てが回収されるわけではない
  18. 18 オブジェクトのライフサイクル

  19. 19 Root Node

  20. 20 どのタイミングで開放されるの?

  21. 21 Root Node

  22. 22 Root Node

  23. 23 Root Node

  24. 24 メモリリークのパターン

  25. 25 コンソール タイマー クロージャ 循環参照 (DOM)

  26. 26 コンソール タイマー クロージャ 循環参照 (DOM)

  27. 27

  28. 28 コンソール タイマー クロージャ 循環参照 (DOM)

  29. 29

  30. 30

  31. 31

  32. 32 コンソール タイマー クロージャ 循環参照 (DOM)

  33. 33 JavaScriptの関数は、その関数が定義されたコンテキ ストとは異なるコンテキスト上にある変数に格納される 時、その関数自身および関数の定義時のコンテキストが 一体になった「クロージャ」という特殊なオブジェクトにな る。

  34. 34 わかりづらっ!!

  35. 35

  36. 36

  37. 37

  38. 38

  39. 39

  40. 40 アクティベーションオブジェクト

  41. 41 アクティベーションオブジェクトとは関数のコールが発生 した際に、自動的に生成されるオブジェクト。アクティベー ションオブジェクトには、引数、ローカル変数だけでなく、 argumentsオブジェクト、thisが格納される。

  42. 42

  43. 43 生成される アクティベーションオブジェクト { arguments:, this:, foo:, bar:, baz:, qux:

    }
  44. 44 スコープチェーン

  45. 45 スコープチェーンとは、変数の参照を解決する際にアク ティベーションオブジェクトを辿る仕組み

  46. 46 アクティベーションオブジェクト argument this アクティベーションオブジェクト argument this localBar グローバル変数 globalBar

  47. 47 アクティベーションオブジェクト argument this アクティベーションオブジェクト argument this localBar グローバル変数 globalBar

  48. 48 変数fに対し、明示的にnullをセットしない限り、hoge()内 部のアクティベーションオブジェクトは保持され続ける。

  49. 49 コンソール タイマー クロージャ 循環参照 (DOM)

  50. 50

  51. 51

  52. 52 element(DOM) -> onclick(DOM) -> function(script) -> element(DOM)

  53. 53

  54. 54

  55. 55 WeakMap()

  56. 56 WeakMapは、キーに弱参照を保持できる。 弱参照はGCによって利用されているとみなされないの で、自動的に解放される。

  57. 57 DOM要素に何か値を持たせたいけども、 DOM要素のプロパティを汚したくないときにWeakMapを 利用できる。

  58. 58

  59. 59 メモリリークを見つけるには

  60. 60

  61. 61 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示

    • Profiles ◦ デタッチされた DOM ツリー(メモリリークの一般的な原因)を特定
  62. 62 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示

    • Profiles ◦ デタッチされた DOM ツリー(メモリリークの一般的な原因)を特定
  63. 63

  64. 64

  65. 65 • Memory ◦ ネイティブメモリを表す。DOM のノードはネイティブメモリに格納され、この 値が増えている場合は、DOM のノードが作成されている。 • JavaScript

    Memory ◦ JS ヒープを表す。基本的に見るのはライブ数値(かっこ内のやつ)。 ライブ 数値は、ページ上のアクセス可能なオブジェクトが使用中のメモリ量を表し ている。 この数値が増えている場合は、新しいオブジェクトが作成されてい るか、既存のオブジェクトが拡大している。
  66. 66 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示

    • Profiles ◦ デタッチされた DOM ツリー(メモリリークの一般的な原因)を特定
  67. 67

  68. 68

  69. 69 1. FPS 1 秒あたりのフレーム数。緑色の棒グラフが高いほど、FPS も高くなる。グラフ上部の赤いブロックは時間がかかって いるフレームを示し、問題を含んでいる可能性がある。 2. CPU CPU

    リソース 3. NET ネットワークリソース。棒グラフが長いほどダウンロードに時間がかかっている。
  70. 70 • Keep 60 FPS ◦ ブラウザは1秒間に60回リフレッシュする ◦ 60FPSのためには、1フレームあたり16.67msに抑える必要がある ◦

    一般的には30FPS出てればいい感じらしい
  71. 71

  72. 72

  73. 73 • JS Heap • Documents • Nodes • Listeners

    • GPU
  74. 74

  75. 75

  76. 76

  77. 77

  78. 78

  79. 79

  80. 80 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示

    • Profiles ◦ デタッチされた DOM ツリー(メモリリークの一般的な原因)を特定
  81. 81

  82. 82

  83. 83

  84. 84 • Distance ◦ GC rootからの距離。Windowオブジェクトからの距離 • Object Counts ◦

    オブジェクト数 • Shallow Size ◦ 直接参照されているオブジェクトのデータサイズ • Retained Size ◦ 参照されている全てのオブジェクトの総データサイズ
  85. 85

  86. 86

  87. 87 AngularJSの メモリリーク対策

  88. 88 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない

  89. 89 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない

  90. 90

  91. 91

  92. 92 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない

  93. 93

  94. 94

  95. 95 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない

  96. 96

  97. 97

  98. 98 • Third Parties

  99. 99

  100. 100

  101. 101 Angular2の メモリリーク対策

  102. 102

  103. 103

  104. 104

  105. 105

  106. 106 Change Detectionをスキップして高速化

  107. 107

  108. 108

  109. 109

  110. 110 イベントが起こると毎回すべてのコンポーネントで Chande Detectionを走らせなければならない

  111. 111

  112. 112 チェックの回数を減らしたい

  113. 113 Immutable オブジェクト

  114. 114

  115. 115

  116. 116

  117. 117 Observable オブジェクト

  118. 118 ImmutableのようにObservableは変更があっても 新しい参照は与えられない。その代わりに変更に反応 するためにsubscribeが使用できる。

  119. 119

  120. 120

  121. 121 どうすればAngularに変更を知らせることができる?

  122. 122

  123. 123

  124. 124 NgZoneでChande Detectionが走っているか確認

  125. 125

  126. 126 angular-performance-checklist https://github.com/mgechev/angular-performance-checklist#runtime-optimizations

  127. 127 UI / UXのチューニング

  128. 128 振る舞いやUIを変更することで ユーザーの体感速度を上げること

  129. 129 • RAILパフォーマンスモデルでは、ユーザーのアクショ ンに対するレスポンスの指標は100ミリ秒以内 • ロードが始まってからユーザーが操作可能になるまで の時間は1000ミリ秒以内にすべき

  130. 130 1秒を超えるような処理や読み込みを行う場合には、待 ち時間であることを表すインジケータやアニメーションな どを返してあげること。 そして、ユーザーに待たされている感覚を与えないこと。

  131. 131 • インターフェイスプレビュー ◦ ローディング中に仮のコンテンツを表示しておく • ローディングアニメーション ◦ マイクロインタラクション

  132. 132

  133. 133

  134. 134

  135. 135 New Relic Browserで SPA監視

  136. 136

  137. 137 定期的に観測することで、問題のあるページ、処理を洗 い出したい

  138. 138 • Ajaxのレスポンスタイムパフォーマンス • ページレンダリングの時間がわかる ◦ 遅いページが大体わかる • ブラウザ毎のパフォーマンスがわかる •

    エラー監視
  139. 139