Call stack? Event loop? Async? ?

This content originally appeared on DEV Community and was authored by Takuya Kikuchi

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

This content originally appeared on DEV Community and was authored by Takuya Kikuchi

Print Share Comment Cite Upload Translate Updates

APA

Takuya Kikuchi | Sciencx (2021-09-05T01:52:23+00:00) Call stack? Event loop? Async? ?. Retrieved from https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/

MLA

" » Call stack? Event loop? Async? ?." Takuya Kikuchi | Sciencx - Sunday September 5, 2021, https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/

HARVARD

Takuya Kikuchi | Sciencx Sunday September 5, 2021 » Call stack? Event loop? Async? ?., viewed ,<https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/>

VANCOUVER

Takuya Kikuchi | Sciencx - » Call stack? Event loop? Async? ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/

CHICAGO

" » Call stack? Event loop? Async? ?." Takuya Kikuchi | Sciencx - Accessed . https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/

IEEE

" » Call stack? Event loop? Async? ?." Takuya Kikuchi | Sciencx [Online]. Available: https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/. [Accessed: ]

rf:citation

» Call stack? Event loop? Async? ? | Takuya Kikuchi | Sciencx | https://www.scien.cx/2021/09/05/call-stack-event-loop-async-%f0%9f%a4%94/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.