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
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
830
Other Decks in Programming
See All in Programming
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
190
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
構文解析器入門
ydah
7
1.9k
20250708_JAWS_opscdk
takuyay0ne
2
150
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How GitHub (no longer) Works
holman
314
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Cult of Friendly URLs
andyhume
79
6.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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も速くなった!