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

Improve SPA Performance with Angular App

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

mana

June 21, 2017
Tweet

Other Decks in Programming

Transcript

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

    / Canada ◦ Art School ▪ デザイン学んだり ▪ 仕事したり • BizReach ◦ HRMOS事業部 フロントエンドエ ンジニア ◦ Angular
  2. 7

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

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

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

    レンダリングツリーのレイアウト、ペイント ◦ ユーザーのアクション ◦ JavaSriptの実行コスト
  6. 15

  7. 27

  8. 29

  9. 30

  10. 31

  11. 35

  12. 36

  13. 37

  14. 38

  15. 39

  16. 42

  17. 50

  18. 51

  19. 53

  20. 54

  21. 58

  22. 60

  23. 63

  24. 64

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

    Memory ◦ JS ヒープを表す。基本的に見るのはライブ数値(かっこ内のやつ)。 ライブ 数値は、ページ上のアクセス可能なオブジェクトが使用中のメモリ量を表し ている。 この数値が増えている場合は、新しいオブジェクトが作成されてい るか、既存のオブジェクトが拡大している。
  26. 67

  27. 68

  28. 71

  29. 72

  30. 74

  31. 75

  32. 76

  33. 77

  34. 78

  35. 79

  36. 81

  37. 82

  38. 83

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

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

  41. 86

  42. 90

  43. 91

  44. 93

  45. 94

  46. 96

  47. 97

  48. 99

  49. 100

  50. 102

  51. 103

  52. 104

  53. 105

  54. 107

  55. 108

  56. 109

  57. 111

  58. 114

  59. 115

  60. 116

  61. 119

  62. 120

  63. 122

  64. 123

  65. 125

  66. 132

  67. 133

  68. 134

  69. 136

  70. 139