前言
极度投入，深度沉迷，边界清晰
前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待探讨点可随便评论，与各位同学一起学习~
欢送关注
『前端进阶圈』公众号 ，一起摸索学习前端技术......公众号回复
加群或扫码, 即可退出前端交流学习群，长期交流学习......公众号回复
加好友，即可r添加为好友
热点面试题：浏览器和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)
往期回顾：
- 热点面试题：Virtual DOM 相干问题？
- 热点面试题：什么是粘包/半包问题，该如何解决？
- 热点面试题：console.log()同异步问题？
- 热点面试题：过程系列问题？
- 热点面试题：Node.js 中的垃圾回收机制？
- 热点面试题：简述 http3.0~http1.0 别离有什么改良？
- JavaScript中的AMD和CMD标准
- Vue数据监听Object.definedProperty()办法的实现
最初：
- 欢送关注
『前端进阶圈』公众号 ，一起摸索学习前端技术...... - 公众号回复
加群或扫码, 即可退出前端交流学习群，长期交流学习...... - 公众号回复
加好友，即可添加为好友