热点面试题：浏览器和Node的宏任务和微任务

前言

极度投入，深度沉浸，边界清晰

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~

热点面试题：浏览器和Node的宏任务和微任务

浏览器中的宏任务和微任务？

• 宏任务：script中的代码，setTimeout, setInterval, I/O, UI render
• 微任务：promise(async/await), Object.observe, MutationObserver

Node 中的宏任务和微任务？

• 宏任务：setTimeout,setInterval,setImmediate,script 整体代码， I/O 操作
• 微任务：process.nextTick，new Promise().then()

浏览器与Node中的宏任务和微任务的区别是什么？

• node 环境下的 setTimeout 会依次执行，而浏览器是一个一个分开的
• 浏览器端：在每执行一次宏任务前，会将微任务队列全部清空

案例

// eg1:
console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => console.log(6));

console.log(7);

// 同步任务：
    // console.log(1);
    // console.log(7);
// 宏任务：
    // setTimeout(() => console.log(2));
    // setTimeout(() => console.log(6));
    // setTimeout(() => console.log(4)))
// 微任务：
    // Promise.resolve().then(() => console.log(3));
    // Promise.resolve().then(() => setTimeout(() => console.log(4)));
    // Promise.resolve().then(() => console.log(5));

/**
 * 结果：1 7 3 5 2 6 4
 * 解析：
 * 第一轮开始：
 *  1. 同步任务 console.log(1); => 1
 *  2. 遇到宏任务，加入宏任务队列
 *  3. 遇到微任务，加入微任务队列
 *  4. 遇到微任务，加入微任务队列
 *  5. 遇到微任务，加入微任务队列
 *  6. 遇到宏任务，加入宏任务队列
 *  7. 同步任务 console.log(7); => 7
    宏任务：
        setTimeout(() => console.log(2));
        setTimeout(() => console.log(6));
    微任务：
        Promise.resolve().then(() => console.log(3));
        Promise.resolve().then(() => setTimeout(() => console.log(4)));
        Promise.resolve().then(() => console.log(5));
 * 第一轮结果： 1 7


 * 第二轮开始：
 *  1. 执行微任务，取出队列中的第一项：console.log(3)); => 3
 *  2. 执行微任务，取出队列中的第二项，此时遇到宏任务 setTimeout(() => console.log(4)) 加入到宏任务队列
 *  3. 执行微任务，取出队列中的第三项：console.log(5)); => 5
 *  4. 此时微任务队列为空，执行宏任务队列第一项：setTimeout(() => console.log(2)); => 2
 *  5. 此时微任务队列为空，执行宏任务队列第二项：setTimeout(() => console.log(6)); => 6
 *  6. 此时微任务队列为空，执行宏任务队列第三项：setTimeout(() => console.log(4)); => 4
 *  7. 此时所有任务执行完，返回结果
    宏任务：
        setTimeout(() => console.log(2));
        setTimeout(() => console.log(6));
        setTimeout(() => console.log(4));
    微任务：
        empty
 * 第二轮结果：1 7 3 5 2 6 4

    最终结果：1 7 3 5 2 6 4
 */




// eg2:
setImmediate(function A() {
    console.log(10);
    setImmediate(function B() {
        console.log(11);
    });
});

console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => console.log(6));

process.nextTick(function A() {
    console.log(8);
    process.nextTick(function B() {
        console.log(9);
    });
});

console.log(7);

/**
 * 过程省略.....
 */
// 1 7 8 9 3 5 2 6 4 10 11

文章特殊字符描述：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项标准：A:(attention matters)
4. 详情描述标注：D:(detail info)
5. 总结标注：S:(summary)
6. 分析标注：Ana:(analysis)
7. 提示标注：T:(tips)