1. What is Event Loop
An Event Loop is a mechanism in a browser or Node that allows javaScript to run in a single thread without blocking, and is often used asynchronously.
During the execution of JavaScript code, not only the function call stack is used to complete the execution order of functions, but also the task queue is used to complete the execution of other codes.
The entire execution process is called the event loop. Event loops are unique within a thread, but task queues can have multiple. Task queues are divided into macro-tasks and micro-tasks. In the latest standard, they are called Tasks and Jobs respectively.
Macro Task
tag body content, setTimeout, setInterval, setImmediate, I/O, UI Rending.
Micro task microtask
Process.nextTick(Node only),Promise, Object.observe(deprecated), MutationObserver.
Execution sequence of macro and micro tasks (*)
Execute the macro task, and then execute the micro task generated by the macro task. If a new micro task is generated during the execution of the micro task, continue to execute the micro task. After the execution of the micro task, return to the macro task for the next cycle.
2. Event Loop in the browser
JavaScript has a main thread and a call-stack. All tasks are put on the call stack and wait for the main thread to execute.
JS call stack
The JS call stack uses last-in, first-out rules. When a function is executed, it is added to the top of the stack, and when the stack is finished, it is removed from the top of the stack until the stack is empty.
Synchronous and asynchronous tasks
Javascript is divided into single thread task synchronization task and asynchronous tasks, the synchronization task will wait for the main thread in sequence in the call stack in sequence, after the asynchronous task will result in the asynchronous task, will register the callback function in a task in the queue waiting for the main thread of free time (the call stack is empty), are read to wait for the main thread of execution stack.
Event Loop Execution Process (*)
If the execution stack is empty, the microTask queue is checked. If the execution stack is empty, the Task (macro Task) is executed; otherwise, all the microtasks are executed at once.
understandasync/await
Async /await is converted at the bottom to promise and then callback functions.
In other words, this is the syntactic candy of promise.
Each time we use await, the interpreter creates a Promise object and puts the operations from the remaining async functions into the then callback.
The implementation of async/await is inseparable from Promise. ‘async’ is short for ‘asynchronous’ and’ await ‘is short for’ async wait ‘which can be thought of as waiting for an asynchronous method to complete.
Example async/await execution order
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')}async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function() {
console.log('setTimeout')},0)
new Promise(resolve= > {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')})console.log('script end')
// The output of the old version is as follows, but continue to read through the rest of this article. Note that there are changes in the new version
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout
Copy the code