In the last article“Analysis of EventLoop Event Cycle in JS”One mentioned in
Event QueueIn fact, there are two kinds of queue in the event cycle, and one is called
Event QueueKnown in the HTML specification as
Task Queue, but in order to distinguish, is generally called
Job QueueIt is mentioned in the ECMAScript specification when dealing with Promise callbacks, but it is generally referred to as because it is similar to the implementation in V8.
Macrotasks includes parsing HTML, generating DOM, executing main thread JS code and other events such as page loading, input, network events, timer events, etc. From the browser’s point of view, Macrotask represents some discrete and independent work.
Microtasks is to complete some minor tasks to update the application state, such as processing the callback of Promise and DOM modification, so that these tasks can be executed before the browser re-renders. Microtask should be executed asynchronously as soon as possible, so their cost is less than Macrotask, and it can make us execute before UI rendering again, avoiding unnecessary UI rendering.
The implementation of Event Loop requires at least one Macrotask Queue and at least one Microtask Queue. For ease of understanding, we have all simplified into one.
In short, the Microtask Queue has a higher priority, that is, after executing a Microtask task, the entire Microtask Queue will be cleared, and if there is a new microtask added at this time, it will also be executed.
So let’s look at the following code:
What is the order of execution?
We already know that setTimeout is a Macrotask, Promise is a Microtask, and this code is also a Macrotask executed from top to bottom.
- Start execution,Execute script as a task into Macrotask QueueAt the same time, enter the call stack for execution.
- Line 1, output
- The setTimeout callback for Line 3 entered Macrotask Queue to wait.
- Line 7 callback enters Microtask Queue to wait.
- Line 13 output
script endAt this point, the script execution is complete (i.e., a Macrotask is completed)
- Start executing the Microtask Queue, take out one of them and put it into the call stack for execution.
- Start executing Line 7 callback, which outputs
promise1To return undefined
- The callback of Line 9 entered the Microtask Queue. Since the Microtask Queue is not empty, the callback is directly executed and output
promise2Which returns undefined
- The Microtask Queue has been cleared (the browser can update the rendering UI at this time) and the task in the Macrotask Queue is put into the call stack for execution.
- Execute callback of Line 3, output
setTimeout, Macrotask Queue empty
- Program execution completed
So the printing order is:
script start -> script end -> promise1 -> promise2 -> setTimeout
PS. The above code execution process, it is recommended to see the penultimate reference article of the original text, there is dynamic interaction can be practiced.
- Microtask has a higher priority than Macrotask.
- Macrotask is always executed after JS code execution is complete and Microtask Queue is empty.
- JS code execution is itself a Macrotask
- The UI may be re-rendered after the Microtask Queue is emptied.
- Promise belongs to Microtask, setTimeout belongs to Macrotask.
The overall execution sequence is as follows:
Events and setTimeout etc.
ECMA262 Job Queues
HTML Standard Task Queue
HTML series: macrotask and microtask
microtask and macrotask a hands on approach
Public number:Code force fully open