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

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 ユーザー第一に考える
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に負荷がかかると遅い
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）
28. 28 コンソール タイマー クロージャ 循環参照 （DOM）
32. 32 コンソール タイマー クロージャ 循環参照 （DOM）
33. 33 JavaScriptの関数は、その関数が定義されたコンテキ ストとは異なるコンテキスト上にある変数に格納される 時、その関数自身および関数の定義時のコンテキストが 一体になった「クロージャ」という特殊なオブジェクトにな る。
34. 34 わかりづらっ!!
40. 40 アクティベーションオブジェクト
41. 41 アクティベーションオブジェクトとは関数のコールが発生 した際に、自動的に生成されるオブジェクト。アクティベー ションオブジェクトには、引数、ローカル変数だけでなく、 argumentsオブジェクト、thisが格納される。
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）
52. 52 element(DOM) -> onclick(DOM) -> function(script) -> element(DOM)
55. 55 WeakMap()
56. 56 WeakMapは、キーに弱参照を保持できる。 弱参照はGCによって利用されているとみなされないの で、自動的に解放される。
57. 57 DOM要素に何か値を持たせたいけども、 DOM要素のプロパティを汚したくないときにWeakMapを 利用できる。
59. 59 メモリリークを見つけるには
61. 61 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示 • Profiles ◦ デタッチされた DOM ツリー（メモリリークの一般的な原因）を特定
62. 62 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示 • Profiles ◦ デタッチされた DOM ツリー（メモリリークの一般的な原因）を特定
65. 65 • Memory ◦ ネイティブメモリを表す。DOM のノードはネイティブメモリに格納され、この 値が増えている場合は、DOM のノードが作成されている。 • JavaScript Memory ◦ JS ヒープを表す。基本的に見るのはライブ数値（かっこ内のやつ）。 ライブ 数値は、ページ上のアクセス可能なオブジェクトが使用中のメモリ量を表し ている。 この数値が増えている場合は、新しいオブジェクトが作成されてい るか、既存のオブジェクトが拡大している。
66. 66 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示 • Profiles ◦ デタッチされた DOM ツリー（メモリリークの一般的な原因）を特定
69. 69 1. FPS 1 秒あたりのフレーム数。緑色の棒グラフが高いほど、FPS も高くなる。グラフ上部の赤いブロックは時間がかかって いるフレームを示し、問題を含んでいる可能性がある。 2. CPU CPU リソース 3. NET ネットワークリソース。棒グラフが長いほどダウンロードに時間がかかっている。
70. 70 • Keep 60 FPS ◦ ブラウザは1秒間に60回リフレッシュする ◦ 60FPSのためには、1フレームあたり16.67msに抑える必要がある ◦ 一般的には30FPS出てればいい感じらしい
73. 73 • JS Heap • Documents • Nodes • Listeners • GPU
80. 80 • タスクマネージャー ◦ ページで現在使用されているメモリ量を調べる • Performance (Timeline) ◦ メモリの使用量を時系列に表示 • Profiles ◦ デタッチされた DOM ツリー（メモリリークの一般的な原因）を特定
84. 84 • Distance ◦ GC rootからの距離。Windowオブジェクトからの距離 • Object Counts ◦ オブジェクト数 • Shallow Size ◦ 直接参照されているオブジェクトのデータサイズ • Retained Size ◦ 参照されている全てのオブジェクトの総データサイズ
87. 87 AngularJSの メモリリーク対策
88. 88 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない
89. 89 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない
92. 92 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない
95. 95 • Event Handlerを解放してあげる • Watcherを解放してあげる • Serviceのコールバック内で$scopeを使わない
98. 98 • Third Parties
101. 101 Angular2の メモリリーク対策
106. 106 Change Detectionをスキップして高速化
110. 110 イベントが起こると毎回すべてのコンポーネントで Chande Detectionを走らせなければならない
112. 112 チェックの回数を減らしたい
113. 113 Immutable オブジェクト
117. 117 Observable オブジェクト
118. 118 ImmutableのようにObservableは変更があっても 新しい参照は与えられない。その代わりに変更に反応 するためにsubscribeが使用できる。
121. 121 どうすればAngularに変更を知らせることができる？
124. 124 NgZoneでChande Detectionが走っているか確認
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 • インターフェイスプレビュー ◦ ローディング中に仮のコンテンツを表示しておく • ローディングアニメーション ◦ マイクロインタラクション
135. 135 New Relic Browserで SPA監視
137. 137 定期的に観測することで、問題のあるページ、処理を洗 い出したい
138. 138 • Ajaxのレスポンスタイムパフォーマンス • ページレンダリングの時間がわかる ◦ 遅いページが大体わかる • ブラウザ毎のパフォーマンスがわかる • エラー監視