JavaScript’s Single Thread and Event Loop

Slide 1

Slide 1 text

JavaScript’s Single Thread and Event Loop 2024/10/16　ONE CAREER Inc. Xiaodong Hu

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Copyright © ONE CAREER これまで可視化されていなかった「キャリアデータ」を活用し、就職・採用の意思決定をサポート Service and Development History 人事向け採用クラウド HRアワード 2020 人材採用・雇用部門 1 最優秀賞中途採用メディア以上 4,000件転職体験談社員クチコミ 2万件以上新卒採用メディア学生の利用率/ 使いやすさ2 1位学生が最も利用した就職サイト3 2位 1. 日本の人事部「HRアワード2020」にてプロフェッショナル部門（人材採用・雇用部門）で最優秀賞を受賞。 2. NewsPicks発表「【図解】20サービスを徹底比較。本当に役立つ「就活サイト」一覧より。 3. ProFuture株式会社/HR総研「HR総研×就活会議：2025年新卒学生の就職活動動向調査（6月）【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=386）より。 4

Slide 5

Slide 5 text

Copyright © ONE CAREER ONE CAREERは「学生が1年で最も使うサイト」で2位を獲得 1. ProFuture株式会社/HR総研「HR総研×就活会議：2025年新卒学生の就職活動動向調査（6月）【就職活動編】」（https://www.hrpro.co.jp/research_detail.php?r_no=386）より。「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 5年連続 2位 2020年卒 1位マイナビ 2位リクナビ 3位 ONE CAREER 4位楽天みん就 3位 2021~2025年卒 1位マイナビ 2位 ONE CAREER 3位リクナビ 4位楽天みん就 Service and Development History 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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 conﬂicts

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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 ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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!

Slide 13

Slide 13 text

Copyright © ONE CAREER Inc. All Rights Reserved. ● Synchronous task ○ put them into the JS engine immediately, execute them, and wait for results on the ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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

Slide 14

Slide 14 text

Copyright © ONE CAREER Inc. All Rights Reserved. ● Synchronous task ○ put them into the JS engine immediately, execute them, and wait for results on the ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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

Slide 15

Slide 15 text

Copyright © ONE CAREER Inc. All Rights Reserved. ● Synchronous task ○ put them into the JS engine immediately, execute them, and wait for results on the ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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

Slide 16

Slide 16 text

Copyright © ONE CAREER Inc. All Rights Reserved. ● Synchronous task ○ put them into the JS engine immediately, execute them, and wait for results on the ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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

Slide 17

Slide 17 text

Copyright © ONE CAREER Inc. All Rights Reserved. ● Synchronous task ○ put them into the JS engine immediately, execute them, and wait for results on the ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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

Slide 18

Slide 18 text

Copyright © ONE CAREER Inc. All Rights Reserved. ● Synchronous task ○ put them into the JS engine immediately, execute them, and wait for results on the ﬂy. ● Asynchronous task ○ give them to the browser or node ﬁrst, 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

Slide 19

Slide 19 text

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!

Slide 20

Slide 20 text

Copyright © ONE CAREER Inc. All Rights Reserved. Let's look at the code again 20 ● Output 1 ﬁrst. ● 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.

Slide 21

Slide 21 text

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 (inﬁnite) communication between the JS thread and the task queue Summary 21