Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angularは本当に速いのか?
Search
ponday
June 25, 2017
Programming
0
730
Angularは本当に速いのか?
ng-fukuoka Angular Meetup #1の登壇資料です。
ponday
June 25, 2017
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Other Decks in Programming
See All in Programming
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
280
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
エラーって何種類あるの?
kajitack
5
320
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.5k
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
460
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
220
WindowInsetsだってテストしたい
ryunen344
1
200
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
32k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
How GitHub (no longer) Works
holman
314
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
RailsConf 2023
tenderlove
30
1.1k
Rails Girls Zürich Keynote
gr2m
94
14k
Done Done
chrislema
184
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Ace a Technical Interview
jacobian
277
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Transcript
Angularは本当に速いのか? ng-fukuoka Angular Meetup #1 / June 25, 2017 ponday(@ponday_dev)
Profile ponday (@ponday_dev) - chibi-developer - ng-fukuoka スタッフ community -
Kotlin, Java, C# etc... - JavaScript - Angular, Vue.js skill
AngularJS -> Angular 速くなった(らしい)
ほんとに?
測ってみる AngularとReactの速度比較 (AngularJS時代は AngularJS << Reactだったらしい) 以下の項目で比較してみる ① リストレンダリング(DOM) ②
リストレンダリング(コンポーネント) ③ パラメータ変更 → View反映
① リストレンダリング(DOM) リスト(100件, 1000件, 10000件)をレンダリング Angular React 100件 1,000件 10,000件
49.37ms 125.85ms 438.11ms 43.80ms 115.77ms 402.02ms
② リストレンダリング(コンポーネント) リスト(100件, 1000件, 10000件)をレンダリング Angular React 100件 1,000件 10,000件
55.73ms 154.31ms 632.97ms 64.72ms 177.30ms 842.09ms
③ パラメータ変更 → View反映 内部のパラメータを変更 → 表示に反映されるまでの時間を計測 Angular React 1,000件
23.66ms 41.13ms
Angularの変更検知 ・Angularの変更検知の仕組み = Change Detection ・zone.jsを活用。 あらゆる非同期処理を検知してパラメータの変更がないか チェックしている → Reactなどで流行った仮想DOMとは異なる考え方 ・各コンポーネントがChangeDetector(変更検知器)を 持つ。ChangeDetectorもコンポーネントツリーと
同じようにツリーを構成する。
Angularの変更検知 Component Component Component Component Component Component Change Detector Change
Detector Change Detector Change Detector Change Detector Change Detector
Angularの変更検知 DOM zone.js (NgZone) ApplicationRef Change Detection window オブジェクトを パッチ
Angularの変更検知 DOM zone.js (NgZone) ApplicationRef 通知 Change Detection イベント発生
Angularの変更検知 DOM zone.js (NgZone) ApplicationRef イベント発生 補足 Change Detection
Angularの変更検知 DOM zone.js (NgZone) ApplicationRef 変更チェックを実行 (tickメソッド) Change Detection
Angularの変更検知 DOM zone.js (NgZone) ApplicationRef Change Detection コンポーネント毎に変更をチェック → Viewに反映
コンポーネント毎にチェックって遅くないの? ・当然コストは0ではないが遅くない ・Reactの仮想DOMも似たようなもの → Angularが生成するコードはきちんと最適化される ・パラメータの型に応じて内部的に比較方法を切替えて ムダを省いている ・AngularJS時代はひたすらループしていた(らしい) Angularではイベントが起こらない限りチェックはしない
パフォーマンスチューニング ・そのままでも十分速い よほどパフォーマンスが求められない限り不要 ・オプションで変更チェックのタイミングも制御可能 ・ChangeDetectionを伴わない非同期処理も書ける → NgZone.runOutsideAngular() → スクロールやウィンドウのリサイズなどを省くと良いかも
まとめ ・レンダリングの速度はReactと遜色ない ・コンポーネントの生成コストはAngularの方が小さそう ・変更チェックについてもReact(仮想DOM)と遜色ない → ChangeDetectionすげえ
結論 Angularも速くなった!