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
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
Search
Kotaro Chiba
June 27, 2020
Technology
1
340
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
JavaScript の実行を制御している `イベントループ` の仕組みに迫ってみます
Kotaro Chiba
June 27, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
uruha
1
370
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
390
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.2k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
540
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
360
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
1.8k
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
Introduction to Jetpack Compose
pohjus
1
110
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
OpenTelemetry実践 はじめの一歩
taxin
0
300
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.3k
SREsのためのSRE定着ガイド
netmarkjp
10
1.4k
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
130
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
230
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
360
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
210
Featured
See All Featured
Fireside Chat
paigeccino
19
2.6k
Unsuck your backbone
ammeep
660
56k
BBQ
matthewcrist
78
8.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
4 Signs Your Business is Dying
shpigford
174
21k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Web development in the modern age
philhawksworth
201
10k
Optimizing for Happiness
mojombo
369
69k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Transcript
JavaScript を書き始める前に知 っておきたい JavaScript のこと #03 Kanazawa.js Remote Meetup #04
千葉 弘太郎 1 1
千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:
DMM.com LLC 2 2
前回 JavaScript を書き始める前に知っておきたい JavaScript のこと #02 「ざっくり知る」JavaScript の prototype について
3 3
今回 JavaScript の実⾏順に迫る イベントループ の仕組み 4 4
JavaScript が実⾏される環境 シングルスレッド で⼀度に実⾏できるタスクは1つのみ 5 5
´・ω・` 。o0(じゃあどうやってあんなにたくさんの⾮同期 の処理を実⾏できてるの???) 6 6
´・ω・` 。o0(処理に30秒かかる実⾏があったら30秒間⽌ まっちゃうんですか...???ツライ...) 7 7
実際は... . イベントループ . Web API を駆使して⾮同期的な処理をしているように⾒せている。 8 8
JavaScript は以下のような関係性で処理を⾏っています。 Call Stack ───────→ Web API │ │ │
│ │ │ Event Loop ←──────→ ⏯ Queue 9 9
/** 1 */ function start() { return 'start :)'; }
/** 2 */ function asyncFunc() { return setIimeout(() => 'exec !', 1000); } /** 3 */ function end() { return 'end ;)'; } start(); // start :) asyncFunc(); // exec ! end(); // end ;) 10 10
なんとなく 1. start :) -> 3. end ;) -> 2.
exec ! の順で結果が出⼒されるのは予想できる。 11 11
なんでかな? 12 12
/** 1 */ function start() { return 'start :)'; }
Call Stack ───────→ Web API [start()] │ │ │ │ │ │ Event Loop ←──────→ ⏯ Queue start() は call stack で呼び出されて、 start :) が出⼒されて終わる(ポップされる) 13 13
/** 2 */ function asyncFunc() { return setIimeout(() => 'exec
!', 1000); } Call Stack ───────→ Web API [asyncFunc()] [() => 'exec !', 1000sec] [setTimeout()] │ │ │ │ │ │ │ Event Loop ←──────→ ⏯ Queue asyncFunc() が実⾏されて setTimeout が callback を WebAPI に追加します。 asyncFunc, setTimeout はこれでポップ。 14 14
Call Stack ───────→ Web API [end()] [after 1000sec] │ │
│ │ │ │ Event Loop ←──────→ ⏯ Queue [() => 'exec !'] 1秒後に callback 内の () => 'exec !' が queue へ。 call stack 側にはまだ end() がいるので、先に end() が 実⾏されます。 15 15
Call Stack ───────→ Web API [() => 'exec !'] │
│ │ │ │ │ Event Loop ←──────→ ⏯ Queue Event loop が call stack に何も無いことを確認して、 queue の callback関数を実⾏します。 16 16
まとめ . 関数の実⾏は call stack で . 関数の処理によっては Web API
を介して callback など queue に待機させる . Event loop は call stack と queue を監視している . Call stack に実⾏する関数が無くなった時 event loop が queue に溜まっている関数を call stack へ移して実⾏ 17 17
ちょっと詳しく Queue にはいくつか種類がある Macrotask setTimeout | setInterval | setImmediate Microtask
process.nextTick | Promise callback ...etc Event loop が実⾏する queue の順序は Microtask > Macrotask の順 18 18
次回 どうしようかな... ´・ω・` OOPとかをプロトタイプで説明してもちょっと過去の産物 になりそうなので、違うネタにする予定 なにか要望ありますか? 19 19