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

Copyright © ONE CAREER Inc. MISSION 人の数だけ、 キャリアをつくる。

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

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

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 conflicts

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 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!

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 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

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 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

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 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

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 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

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 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

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 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

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 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.

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

Slide 22

Slide 22 text

Copyright © ONE CAREER Inc. All Rights Reserved. Thanks for your listening! 22

Slide 23

Slide 23 text

Copyright © ONE CAREER Inc. All Rights Reserved. We are hiring! 23

Slide 24

Slide 24 text

Copyright © ONE CAREER Inc. All Rights Reserved. X、EntranceBookで情報を発信中 🚀 興味のある方はぜひ!