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
- 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)
- e.g.
- 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
Oldest comments (1)
ππ