[javascript] single thread 인 javascript 가 어떻게 async 한 task 를 수행할 수 있나요?

[hyoseok0]

• 브라우저

  • web api
    • In essence, they are threads that you can’t access, you can just make calls to them. They are the pieces of the browser in which concurrency kicks in. If you’re a Node.js developer, these are the C++ APIs.
  • https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

• node.js

  • C++ api
    • system kernel 이용
      • multi-threaded
      • perform multiple tasks simultaneously in the background
  • job queue
  • https://betterprogramming.pub/single-threaded-and-asynchronous-how-does-node-do-it-d964100766a

[hyoseok0]

• https://sculove.github.io/post/javascriptflow/

크게 4가지 component 고려

• event loop
• main thread
  • call stack
• worker threads
  • Web API
    • 브라우저
  • c++ API
    • node.js
• queue
  • task queue
  • microtask queue
  • animation frame (브라우저)

각 component 역할

• event loop
  • central coordinator
  • worker thread 에 task 를 delegate 하고, task 가 종료되면 callback 함수를 task 의 특성에 맞게 queue 에 전달
• main thread (call stack)
  • long-running 하지 않고, computationally intensive 하지 않는 task 들을 LIFO (Last-In-First-Out) 방식으로 수행
• worker threads
  • long-running 또는 computationally intensive 한 task 들을 수행
    • long-running task
      • I/O operation
      • Timer
      • event source
    • computationally intensive 한 task
      • performing image processing
      • encoding or decoding audio/video
      • running complex calculations
  • queue
  • worker thread 에 의해 전달받은 callback 함수 저장 위치

왜 javascript 는 single-threaded 라고 하는가?

• main thread (call stack) 이 single-threaded 하기 때문

queue 구분 기준

• 출처 - lightining-talk-task-queue-and-micro-task-queues-in-browser

  참고

• 자바스크립트 비동기 처리 과정과 RxJS Scheduler

• What the heck is the event loop anyway?