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

Comments

[Osama]

👏👏