table of Contents
Preface
Now every time an article is opened, the front-end team issued a question. I read it in the interview at the time and did not summarize it. As a result, I saw that the question was the execution order of js and included macro tasks and micro tasks, but the answer was really bad. Very far, so to sum up again
js execution order
We know that js is a pipeline, there are no redundant branches, and it is executed from top to bottom .
The principle is that the v8 engine is used to parse js. Because the v8 engine is single-threaded, js is also single-threaded.
At this point you will have questions: But isn't the timer as we know it "multi-threaded"? In fact, the timer is fake "multi-threaded". You will know this later
There are two main threads and task queues in the v8 engine . At the same time, the smooth execution is the same first, then the macro.
When the v8 engine parses the asynchronous code, such as the timer, it will pass the asynchronous code to the relevant module for processing. , After processing, it is handed over to the event queue for queuing. When the execution stack is free, the message queue will hand the event to the call stack for execution.
The simple understanding is: soldiers first. For
example, in a battle team, soldiers and ordinary people are interspersed with each other. Soldiers are synchronous , and ordinary people are asynchronous . Because soldiers have priority, all soldiers will come out of the team and line up in a line, then this is the main thread , ordinary people line up in a line, then this is the task queue , when the soldiers complete tasks in turn, the main thread will be empty Come out. At this time, the adult men ( microtasks ) among ordinary people will stand up and be queued to the main thread. When the adult men complete the tasks, they disappear in turn, so the remaining people ( macro tasks ) will occupy the main thread. .
Through this story, it is estimated that we can generally understand what is synchronous, asynchronous, micro task, macro task, main thread and task queue. The following questions can deepen a deeper understanding of the execution order of js.
Before doing the questions, let's first understand the macro tasks and what are the micro tasks
Micro task
-The micro tasks I know about are
- Promise.then catch finally
- async...await (it is syntactic sugar for promise)
- Object.observe
- MutationObserver
Note: The content of Promise is synchronous, and the callback of his then catch finally is asynchronous
Macro task
-The macro tasks I know are
- setTimeout
- setInterval
- setImmediate
- I / O
- UI rendering
Exercise 1
setTimeout(() => console.log(1), 0)
new Promise(res => {
console.log(2)
setTimeout(() => console.log(3), 0)
res()
}).then(() => console.log(4))
console.log(5)
Exercise 1: Analysis: This code is mixed, so we separate the soldiers, men and the rest from top to bottom
| Synchronize | Micro task | Macro task |
|---|---|---|
| console.log(2) | console.log(4) | setTimeout(() => console.log(1), 0) |
| console.log(5) | setTimeout(() => console.log(3), 0) |
Therefore, we conclude that the execution order is 2.5.4.1.3
Exercise 2
setTimeout(() =>
new Promise(res => {
console.log(6)
setTimeout(() => console.log(7), 0)
res()
}).then(() => console.log(8))
, 0)
new Promise(res => {
console.log(2)
setTimeout(() => console.log(3), 0)
res()
}).then(() => console.log(4))
console.log(5)
Exercise 2 analysis:
| Synchronize | Micro task | Macro task |
|---|---|---|
| console.log(2) | console.log(4) | setTimeout(() => new Promise(res => {console.log(6) setTimeout(()=> console.log(7), 0) res()}).then(() => console.log(8)), 0) |
| console.log(5) | setTimeout(() => console.log(3), 0) |
Let's perform synchronization first: Then we can easily get the answer for the first three: 2.5.4
At this time, we will be very confused about the macro task containing micro tasks.
At this time, only the macro task is left in the main thread, then we will continue the macro task. Disassemble
| Synchronize | Micro task | Macro task |
|---|---|---|
| console.log(6) | console.log(8) | setTimeout(() => console.log(3), 0) |
| - | - | setTimeout(() => console.log(7), 0) |
In this queuing, we will think why 3 is ahead of 7, you can just understand it, when we execute the macro task a1, at this time it has come out of the task queue and arrived in the main thread, but when it is executed , Found that they are a family, there are three types of same, micro, and macro, so we have to disassemble them, but if you disassemble the macro, you must obediently line up to the back instead of jumping in line.
Then we naturally come to the answer is 2.5 .4.6.8.3.7
Exercise 3
console.log("游戏开始",1);
new Promise( (resolve) => {
console.log("promise",2);
resolve();
})
.then( () => {
console.log("then",3);
});
console.log("promise结束",4);
setTimeout( () => {
console.log("setTimeout",5);
new Promise( (resolve) => {
console.log("promise",6);
resolve();
})
.then( () => {
console.log("then",7);
});
},0);
new Promise( (resolve) => {
console.log(promise,8);
resolve()
})
.then( () => {
console.log(then,9)
setTimeout( () => {
console.log("setTimeout",10);
},0);
})
console.log("游戏结束",11);
In the same way, we will split
| Synchronize | Micro task | Macro task |
|---|---|---|
| console.log("Game Start", 1); | console.log(“then”,3); | console.log(“setTimeout”,5);new Promise( (resolve) => {console.log(“promise”,6);resolve();}) .then( () => {console.log(“then”,7);}); |
| console.log(“promise”,2); | console.log(then,9) setTimeout( () => {console.log(“setTimeout”,10); },0); | ----- |
| console.log("promise end", 4); | ----- | ----- |
| console.log(promise,8); | ----- | ----- |
| console.log("Game Over",11); | ----- | ----- |
We can get the first 6 answers: 1, 2, 4, 8, 11, 3
At this point we have executed
console.log(then,9)
setTimeout( () => {
console.log("setTimeout",10);
},0);
Then split
| Synchronize | Micro task | Macro task |
|---|---|---|
| console.log(then,9) | - | console.log(“setTimeout”,5);new Promise( (resolve) => {console.log(“promise”,6);resolve();}) .then( () => {console.log(“then”,7);}); |
| - | - | setTimeout( () => { console.log(“setTimeout”,10);},0); |
Same as Exercise 2, the newly added macro task cannot jump in the queue
, and the answer in the next step is 9
At this point we continue to split the macro a1
| Synchronize | Micro task | Macro task |
|---|---|---|
| console.log(“setTimeout”,5); | console.log(“then”,7) | - |
| console.log(“promise”,6); | - | setTimeout( () => { console.log(“setTimeout”,10);},0); |
Get the answer 5.6.710
Finally, the answer to exercise 3 is 1.2.4.8.11.3.9.5.6.7.10
After finishing the question, do you think the timer is fake "multi-threaded".