Introduction to asynchronous Macrotask and Microtask in JavaScript

Introduction to asynchronous Macrotask and Microtask in JavaScript

What is Macrotask? What is Microtask?
In understanding what is Macrotask? Before we take a look at the event looping mechanism in JavaScript, let's look at the following code: Microtask

Console.log (1); setTimeout(function() {  Console.log (20); Console.log ( 3);

It is obvious that the result of the above operation is 1,3,2;
The above code settimeout has a delay of 0, which can be understood as settimeout as an asynchronous function call, because JavaScript is single-threaded, the main thread has an execution stack, and a task queue
, the main thread executes the code sequentially, and when an asynchronous function is encountered, it is first put into the stack, and all the main thread functions are finished before the asynchronous function is executed until all the asynchronous functions are completed.

Macrotasks and Microtasks

Both Macrotasks and microtasks belong to one of the above asynchronous tasks, each of which has the following APIs:
macrotasks: setTimeout, SetInterval, setimmediate, I/O, UI rendering
microtasks: process.nexttick, Promise, Mutationobserver

SetTimeout Macrotask, and Promise's microtask are different, first look at the following code:

Console.log (1); SetTimeout (function() {  Console.log (20); Promise.resolve (). Then (function() {  Console.log (3);}). Then (function() {  Console.log (4);});

The above code output is 1, 3, 4, 2;

As you can see from the code above, the asynchronous task of Promise's function code takes precedence over SetTimeout's deferred task of 0.
The reason is that the task queue is divided into Macrotasks and microtasks, while the functions of the then method in promise are pushed into the microtasks queue, and settimeout functions are pushed into the macrotasks
In the task queue, Macrotask extracts only one execution in each event loop, and Microtask continues to fetch until the Microsoft queue is empty.
That is, if a microtask task is pushed into execution, the next task in the queue task is called to execute after the main thread task completes, until the task queues to the last task. The event loop will only go into the stack one macrotask at a time, and the main thread will then check the Microtasks queue and complete all the tasks within it before performing the Macrotask task.

Application of Microtask:
Why do you use Microtask? According to HTML Standrad, after each task has finished running, the UI will be re-rendered, then the data is updated in Microtask, so the current task
The latest UI will be available at the end. Conversely: If you create a task to update the data, the rendering will execute two times. Answer as follows (https://www.zhihu.com/question/55364497/answer/144215284)

Introduction to asynchronous Macrotask and Microtask in JavaScript