JavaScript’s Single Thread and Event Loop

Transcript

1. JavaScript’s Single Thread and Event Loop 2024/10/16　ONE CAREER Inc. Xiaodong Hu
2. ONE CAREER Inc . Copyright © ONE CAREER Inc. All Rights Reserved. 自己紹介 Career 趣味 ひとこと 2 Xiaodong Hu Software Engineer Joined One Career in April 2023 as a new graduate Cooking, Coding, Learning languages Let’s talk in English SELF INTRO Career Hobbies
3. Copyright © ONE CAREER Inc. MISSION 人の数だけ、 キャリアをつくる。
4. Copyright © ONE CAREER Inc. All Rights Reserved. これまで可視化されていなかった「キャリアデータ」を活用し、就職・採用の意思決定を サポート
 サービスと開発の歴史 人事向け採用クラウド HRアワード 2020 人材採用・雇用部門 1 最優秀賞 中途採用メディア 以上 4,000件 転職体験談 社員クチコミ 2万件 以上 新卒採用メディア 学生の利用率/ 使いやすさ2 1位 学生が最も 利用した 就職サイト3 2位 1. 日本の人事部「HRアワード2020」にてプロフェッショナル部門（人材採用・雇用部門）で最優秀賞を受賞。 2. NewsPicks発表「【図解】20サービスを徹底比較。本当に役立つ「就活サイト」一覧より。 3. ProFuture株式会社/HR総研「HR総研×楽天みん就：2024年卒学⽣の就職活動動向調査 結果報告【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=359）より。 4
5. Copyright © ONE CAREER Inc. All Rights Reserved. ONE CAREERは「学生が1年で最も使うサイト」で2位を獲得 1. ProFuture株式会社/HR総研 「HR総研×楽天みん就：2024年卒学⽣の就職活動動向調査 結果報告【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=359）より。 「HR総研×楽天みん就：2023年卒学生の就職活動動向調査 結果報告【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=334）より。 「HR総研×楽天みん就：2022年卒学生の就職活動動向調査（6月）結果報告【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=311）より。 「HR総研×楽天みん就：2021年卒学生の就職活動動向調査 結果報告」（https://www.hrpro.co.jp/research_detail.php?r_no=272）より。 「HR総研：「2019年卒学生 就職活動動向調査」（3月調査） 結果報告 vol.1」（https://www.hrpro.co.jp/research_detail.php?r_no=204）より。 圏外 2019年卒 1位 マイナビ 2位 リクナビ 3位 楽天みん就 圏外 ONE CAREER 4年連続 2 位 2020年卒 1位 マイナビ 2位 リクナビ 3位 ONE CAREER 4位 楽天みん就 3位 2021~2024年卒 1位 マイナビ 2位 ONE CAREER 3位 リクナビ 4位 楽天みん就 サービスと開発の歴史 5
6. Copyright © ONE CAREER Inc. All Rights Reserved. 目次 6 • Let’s Look at Codes • JS single thread and Async task • Event Loop and Async task Execution in the Browser • Let's look at the codes again • Summary TOC
7. Copyright © ONE CAREER Inc. All Rights Reserved. Out of the blue, what are the outputs of the following codes? Let’s Look at the Code 7 console.log: Synchronous operation (executed immediately) setTimeout: Asynchronous operation
8. Copyright © ONE CAREER Inc. All Rights Reserved. Oops, both of results are 1 3 2. Let’s Look at the Code 8 1 3 2 1 3 2
9. Copyright © ONE CAREER Inc. All Rights Reserved. 9 But why?? I would like to explain in the following three steps • JS single thread • Synchronous and asynchronous tasks • Way of browser executing sync/async tasks
10. Copyright © ONE CAREER Inc. All Rights Reserved. JS single thread and Async task 10 In fact, Javascript is single-threaded The primary usage of JS are user interaction and manipulation of the DOM. This makes JS has to be single-threaded add 1 dom element delete 1 dom element thread 1 thread 2 Different threads are manipulating the same dom tree, which can cause conflicts
11. Copyright © ONE CAREER Inc. All Rights Reserved. JS single thread and Async task 11 JS is single-threaded, meaning JS can only do one thing at a time. Some tasks are time consuming and can cause thread blocking Problems with single thread If JS is single-threaded, the output of 3 takes at least 2s In real project, it will results in bad user experience (e.g. UI freezing, performance degradation)
12. Copyright © ONE CAREER Inc. All Rights Reserved. How to solve the thread blocking problem? →　Separate synchronous and asynchronous tasks execution. JS single thread and Async task 12 • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. It may be hard to understand with just text, so let's do SIMULATION!
13. Copyright © ONE CAREER Inc. All Rights Reserved. • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. Event Loop and Async task Execution in the Browser 13 JS single thread browser task queue system output
14. Copyright © ONE CAREER Inc. All Rights Reserved. • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. Event Loop and Async task Execution in the Browser 14 JS single thread browser task queue system output 1
15. Copyright © ONE CAREER Inc. All Rights Reserved. • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. Event Loop and Async task Execution in the Browser 15 JS single thread browser task queue system output 1
16. Copyright © ONE CAREER Inc. All Rights Reserved. • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. Event Loop and Async task Execution in the Browser 16 JS single thread browser task queue system output 1 3
17. Copyright © ONE CAREER Inc. All Rights Reserved. • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. Event Loop and Async task Execution in the Browser 17 JS single thread browser task queue system output 1 3 After 2s, push the callback function to the task queue
18. Copyright © ONE CAREER Inc. All Rights Reserved. • Synchronous task ◦ put them into the JS engine immediately, execute them, and wait for results on the fly. • Asynchronous task ◦ give them to the browser or node first, no need to wait. When the JS thread is free, functions from the task queue will be picked and executed. Event Loop and Async task Execution in the Browser 18 JS single thread browser task queue system output 1 3 2
19. Copyright © ONE CAREER Inc. All Rights Reserved. Event Loop and Async task Execution in the Browser 19 JS single thread task queue Event loop means that a single thread keeps asking task queue if there are tasks to be performed Free now, any tasks? Yup, got some!
20. Copyright © ONE CAREER Inc. All Rights Reserved. Let's look at the code again 20 • Output 1 first. • Even though the delay is 0s, callback function is pushed into task queue. • Output 3 • When the JS thread becomes free, callback function is taken from the task queue • 2 is output.
21. Copyright © ONE CAREER Inc. All Rights Reserved. Where these knowledge is used at work • Understand how code works • Understand wired output from console.log ◦ Check if there are asynchronous tasks • Basically, get resources by asynchronous operation ◦ to prevent thread blocking Knowledge Summary • JS is single thread. • Asynchronous operations are handled by the browser / node, picked up from the task queue and executed. • The event loop is the (infinite) communication between the JS thread and the task queue Summary 21
22. Copyright © ONE CAREER Inc. All Rights Reserved. Thanks for your listening! 22
23. Copyright © ONE CAREER Inc. All Rights Reserved. We are hiring! 23
24. Copyright © ONE CAREER Inc. All Rights Reserved. X、EntranceBookで情報を発信中 🚀 興味のある方はぜひ！