DEV Community

Takuya Kikuchi
Takuya Kikuchi

Posted on

Call stack? Event loop? Async? 🤔

What are Call stack? Event loop? Async? 🤔

Watch this youtube to understand them with the awesome visualization!

What the heck is the event loop anyway? | Philip Roberts | JSConf EU - YouTube:

Memo

  • JS is single thread, non-blocking, asynchronous, concurrent language
  • JS has
    • call stack
    • event loop
    • callback queue
    • other apis
  • V8 has
    • call stack: execution context
    • heap: memory allocation
  • Call stack
    • one thread == one call stack == one thing at a time ⇒ blocking
  • Why blocking is the problem ⇒ Because JS runs in the browser and while some action is completed, the browser cannot do anything(User cannot take any actions)
    • Render is blocked when there is actions on call stack
  • Solution? ⇒ asynchronous callbacks(Concurrency)
  • Concurrency & Event loop
    • e.g. setTimeout()
      • stack(deferring the action) ⇒ WebAPI(wait for given time) ⇒ task queue(wait until the call stack is empty) ⇒ Event loop(move the action to stack) ⇒ stack(run the action)
        • Event loop: When stack is empty, looks at the task queue and takes the first take from the queue
  • Render is blocked when there is actions on call stack, and it has higher priority than Callback queue
    • "Don't put slow call on the stack, make it asynchronous"
    • Going asynchronous means give time to render before each async callbacks executed
  • Scroll event ⇒ Debounce it, because it will create a lot of tasks in the queue

Discussion (1)

Collapse
coder_osama profile image
Osama Ben Ali

👏👏