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

目录
相关文章
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
394 3
|
8月前
|
JavaScript 前端开发
Node.js 中实现多任务下载的并发控制策略
Node.js 中实现多任务下载的并发控制策略
179 15
|
11月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
11月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
213 1
|
12月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
运维 JavaScript 安全
自动化运维:使用Ansible简化日常任务深入理解Node.js事件循环和异步编程
【8月更文挑战第27天】在快节奏的技术环境中,自动化不再是奢侈品,而是必需品。本文将引导你通过Ansible实现自动化运维,从基础到高级应用,解锁高效管理服务器群的秘诀,让你的IT操作更加流畅和高效。
|
存储 JavaScript 前端开发
|
JavaScript IDE 持续交付
阿里云云效产品使用合集之如何配置 Node.js构建任务让其在Windows环境中进行
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
JavaScript 前端开发 API
宏任务和微任务,node和浏览器差异
宏任务和微任务,node和浏览器差异

热门文章

最新文章