JS事件轮循机制、宏任务、微任务【实践】

实践理解

以下仅为个人理解，仅供参考！

js事件轮循机制

• 1.js是单线程（主线程），所有js代码都在主线程执行。
• 2.主线程的同步代码执行完成后，就会读取其它任务队列中的任务（优先微任务队列），不断重复这个过程就叫做js的事件轮循机制。

宏任务和微任务

• 3.任务队列分为宏任务队列（可有多个）和微任务队列（只能有一个）。
• 4.主线程的代码就是放置在第一个宏任务队列中。
• 5.同一个宏任务的所有代码从上往下顺序读取，同步代码直接执行，异步代码形成事件后（回调条件被触发，任务已就绪）后进入相应的任务队列（宏任务进宏任务队列，微任务进微任务队列。

实践代码

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('----------------- 主线程初始代码开始，读取任务队列 -----------------');

实践结果

结果分析

• 主线程初始开始至结束：主线程往下顺序初次执行完所有同步代码。
• 微任务1、2被执行：优先读取微任务队列，同时保证先进先出。
• 宏任务2315被执行：微任务队列为空，执行宏任务队列2315，优先形成事件进入队列的先执行。
• 微任务4被执行：宏任务5执行后创建了微任务4并进入微任务队列，执行微任务4。
• 宏任务4被执行：微任务队列为空，再过1秒后宏任务4进入宏任务队列，执行宏任务4。
• 微任务3被执行：宏任务4执行后创建了微任务3并进入微任务队列，执行微任务3。

宏任务和微任务的分类

宏任务

• setTimeout
• setInterval
• requrestAnimationFrame

微任务

• new Promise().then(回调)
• process.nextTick