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
結果報告【就職活動編】」（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
• 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
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
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
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
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)
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!
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
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
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
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
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
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
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!
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.
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
onecareer_tech
smashingmag
addyosmani
phodgson
mongodb
wjessup
bkeepers
speakerdeck
quramy
chrislema
pedronauck
maltzj
michaelherold
