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