Practical understanding
The following is only for personal understanding, for reference only!
js event round robin mechanism
- 1.js is single threaded (main thread), all js code is executed on the main thread.
- 2. After the synchronization code of the main thread is executed, it will read the tasks in the other task queues (priority micro task queue), and repeating this process is called the event round-robin mechanism of js.
Macro task and micro task
- 3. The task queue is divided into macro task queue (there can be multiple) and micro task queue (only one).
- 4. The code of the main thread is placed in the first macro task queue.
- 5. All codes of the same macro task are read sequentially from top to bottom, and the synchronous code is directly executed. After the asynchronous code forms an event (callback conditions are triggered, the task is ready), it enters the corresponding task queue (the macro task enters the macro task queue) , The micro task enters the micro task queue.
Practice code
console.log('----------------- 主线程初始代码开始 -----------------');
// 宏任务1最晚形成事件，1秒后任务就绪，进入宏任务队列。
setTimeout(() => {
console.log('宏任务1被执行');
}, 1000);
// 宏任务2最先形成事件，任务就绪，进入宏任务队列。
setTimeout(() => {
console.log('宏任务2被执行');
}, 0);
// 宏任务3后于宏任务2进入宏任务队列，根据队列的后进后出原则后于宏任务2执行。
setTimeout(() => {
console.log('宏任务3被执行');
}, 0);
new Promise((resolve) =>{
// Promise的参数函数立即执行，属于主线程的同步代码
console.log('Promise1');
for (var i = 0; i < 5; i++) {
console.log(i);
}
resolve();
}).then(() => {
console.log('微任务1被执行');
});
new Promise((resolve) =>{
console.log('Promise2');
resolve();
}).then(() => {
console.log('微任务2被执行');
});
new Promise((resolve) =>{
setTimeout(()=>{
console.log('宏任务4被执行');
resolve();
},2000);
}).then(() => {
console.log('微任务3被执行');
});
new Promise((resolve) =>{
setTimeout(()=>{
console.log('宏任务5被执行');
resolve();
},1000);
}).then(() => {
console.log('微任务4被执行');
});
console.log('----------------- 主线程初始代码开始，读取任务队列 -----------------');
Practice results
Result analysis
- The main thread initially starts to the end: the main thread executes all synchronization codes for the first time in descending order.
- Microtasks 1 and 2 are executed: the microtask queue is read first, and the first in, first out is guaranteed.
- The macro task 2315 is executed: the micro task queue is empty, the macro task queue 2315 is executed, and the event that enters the queue is executed first.
- Micro task 4 is executed: After macro task 5 is executed, micro task 4 is created and enters the micro task queue to execute micro task 4.
- Macro task 4 is executed: the micro task queue is empty, after another 1 second, the macro task 4 enters the macro task queue, and the macro task 4 is executed.
- Micro task 3 is executed: After macro task 4 is executed, micro task 3 is created and enters the micro task queue to execute micro task 3.
Classification of macro tasks and micro tasks
Macro task
- setTimeout
- setInterval
- requrestAnimationFrame
Micro task
- new Promise().then(callback)
- process.nextTick