Angularは本当に速いのか？

ng-fukuoka Angular Meetup #1の登壇資料です。

Transcript

1. Angularは本当に速いのか？ ng-fukuoka Angular Meetup #1 / June 25, 2017 ponday(@ponday_dev)
2. Profile ponday (@ponday_dev) - chibi-developer - ng-fukuoka スタッフ community - Kotlin, Java, C# etc... - JavaScript - Angular, Vue.js skill
3. AngularJS -> Angular 速くなった（らしい）
4. ほんとに？
5. 測ってみる AngularとReactの速度比較 （AngularJS時代は AngularJS << Reactだったらしい） 以下の項目で比較してみる 　① リストレンダリング（DOM） 　② リストレンダリング（コンポーネント） 　③ パラメータ変更 → View反映
6. ① リストレンダリング（DOM） リスト（100件, 1000件, 10000件）をレンダリング Angular React 100件 1,000件 10,000件 49.37ms 125.85ms 438.11ms 43.80ms 115.77ms 402.02ms
7. ② リストレンダリング（コンポーネント） リスト（100件, 1000件, 10000件）をレンダリング Angular React 100件 1,000件 10,000件 55.73ms 154.31ms 632.97ms 64.72ms 177.30ms 842.09ms
8. ③ パラメータ変更 → View反映 内部のパラメータを変更 → 表示に反映されるまでの時間を計測 Angular React 1,000件 23.66ms 41.13ms
9. Angularの変更検知 ・Angularの変更検知の仕組み　＝　Change Detection ・zone.jsを活用。 　あらゆる非同期処理を検知してパラメータの変更がないか 　チェックしている 　→ Reactなどで流行った仮想DOMとは異なる考え方 ・各コンポーネントがChangeDetector（変更検知器）を 　持つ。ChangeDetectorもコンポーネントツリーと 　同じようにツリーを構成する。
10. Angularの変更検知 Component Component Component Component Component Component Change Detector Change Detector Change Detector Change Detector Change Detector Change Detector
11. Angularの変更検知 DOM zone.js （NgZone） ApplicationRef Change Detection window オブジェクトを パッチ
12. Angularの変更検知 DOM zone.js （NgZone） ApplicationRef 通知 Change Detection イベント発生
13. Angularの変更検知 DOM zone.js （NgZone） ApplicationRef イベント発生 補足 Change Detection
14. Angularの変更検知 DOM zone.js （NgZone） ApplicationRef 変更チェックを実行 （tickメソッド） Change Detection
15. Angularの変更検知 DOM zone.js （NgZone） ApplicationRef Change Detection コンポーネント毎に変更をチェック →　Viewに反映
16. コンポーネント毎にチェックって遅くないの？ ・当然コストは0ではないが遅くない ・Reactの仮想DOMも似たようなもの 　→　Angularが生成するコードはきちんと最適化される ・パラメータの型に応じて内部的に比較方法を切替えて 　ムダを省いている ・AngularJS時代はひたすらループしていた（らしい） 　Angularではイベントが起こらない限りチェックはしない
17. パフォーマンスチューニング ・そのままでも十分速い 　よほどパフォーマンスが求められない限り不要 ・オプションで変更チェックのタイミングも制御可能 ・ChangeDetectionを伴わない非同期処理も書ける 　→　NgZone.runOutsideAngular() 　→　スクロールやウィンドウのリサイズなどを省くと良いかも
18. まとめ ・レンダリングの速度はReactと遜色ない ・コンポーネントの生成コストはAngularの方が小さそう ・変更チェックについてもReact（仮想DOM）と遜色ない 　→ ChangeDetectionすげえ
19. 結論 Angularも速くなった！