JS microtask and macro task understanding

Browsers are multithreaded

JS is single threaded => because browsers only give it one thread to render

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

async function async2() {
    console.log('async2');
}

console.log('script start');

setTimeout(() = > {
    console.log('setTimeout');
}, 0);

async1();

new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});

console.log('script end');
Copy the code

Execution order

The main thread (main stack) code executes first, and then returns to the event queue after the main thread code executes. If there are microtasks in the event queue, the microtasks are executed first. Perform the macro task after all the micro tasks are completed.

1. Main thread

2. Microtasks

3. Macro tasks

Common microtasks:

Promise

async

await

.

Common macro tasks:

Timer (setTimeout)

The event

.

JS task to carry out the tasks of the stack, then the inside of the main stack task has been completed to the event queue inside to find, in the event queue, look from the micro task first, will find task to continue to pressure into the stack of execution, execution stops and then go to the event queue of tasks, and then press the stack, until the tasks in the queue is empty, and then go to a macro task queue, Push main stack execution until all tasks are completed. The process forEvent loop