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

简介: 热点面试题:浏览器和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

文章特殊字符描述

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

相关文章
|
6月前
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
151 3
|
6月前
|
存储 算法 前端开发
【面试题】说一下浏览器垃圾回收机制?
【面试题】说一下浏览器垃圾回收机制?
|
6月前
|
JavaScript 前端开发 算法
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
|
12天前
|
存储 JavaScript 网络协议
浏览器与 Node 的事件循环
浏览器和Node.js的事件循环是异步操作的核心机制。它们通过管理任务队列和回调函数,确保程序在处理耗时任务时不会阻塞主线程,从而实现高效、响应式的应用开发。
|
1月前
|
存储
经典面试题:写一个"标准"宏MIN ,这个宏输入两个参数并返回较小的一个 复制 #define MIN(a,b) ((a)<=(b)?(a):(b))
你的宏定义已非常接近标准。以下是改进后的 `MIN` 宏定义,支持多种数据类型并避免副作用:
|
1月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
6月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
6月前
|
JavaScript 前端开发 API
宏任务和微任务,node和浏览器差异
宏任务和微任务,node和浏览器差异
|
6月前
|
存储 JavaScript 前端开发
node面试知识
node面试知识
50 0
|
6月前
|
缓存 网络协议 前端开发
面试题:浏览器中输入URL返回页面过程?
面试题:浏览器中输入URL返回页面过程?
108 0