共计 2755 个字符,预计需要花费 7 分钟才能阅读完成。
前言
极度投入,深度沉迷,边界清晰
前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待探讨点可随便评论,与各位同学一起学习~
欢送关注
『前端进阶圈』
公众号,一起摸索学习前端技术 ……公众号回复
加群
或扫码
, 即可退出前端交流学习群,长期交流学习 ……公众号回复
加好友
,即可 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()办法的实现
最初:
- 欢送关注
『前端进阶圈』
公众号,一起摸索学习前端技术 …… - 公众号回复
加群
或扫码
, 即可退出前端交流学习群,长期交流学习 …… - 公众号回复
加好友
,即可添加为好友
正文完