引言:
作为前端开发人员,JavaScript对于我们来说并不陌生,在日常开发中我们经常会遇到这样的情况,给定几行代码,需要知道其输出内容和顺序,我们可以直接在浏览器中运行,控制台查看运行结果,但如果是在面试求职中呢,我们显然不能打开电脑运行一下,所以理解JavaScript执行机制就显得尤为重要了。
1.关于javascript
javascript是一门单线程语言,简而言之呢,就是按照语句出现的顺序执行的,在最新的HTML5中提到了web-worker,但JavaScript是单线程这一核心仍未改变,所以一切javascript版本的“多线程”都是用单线程模拟出来的。
2.javascript事件循环
既然js是单线程,那就像只有一个窗口的银行,客户需要排队一个一个办理业务,同理js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。那么问题来了,假如我们想浏览新闻,但是新闻包含的超清图片加载很慢,难道我们的网页要一直卡着直到图片完全显示出来?因此聪明的程序员将任务分为两类:
- 同步任务
- 异步任务
当我们打开网站时,网页的渲染过程就是一大堆同步任务,比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务,就是异步任务。关于这部分有严格的文字定义,但本文的目的是用最小的学习成本彻底弄懂执行机制,所以我们用导图来说明:
导图要表单的内容用文字来表述的话:
- 同步和异步任务分别进入不同的执行“场所”,同步的进入主线程,异步的进入Event Table并注册函数。
- 当指定的事情完成时,Event Table会将这个函数移入Event Queue
- 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数(出队),进入主线程执行。
- 上述过程会不断重复,也就是常说的Event Loop(事件循环)。
3.javascript宏任务和微任务
宏任务和微任务
1,宏任务:当前调用栈中执行的代码为宏任务。(主代码块,定时器等等)。
2,微任务:当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise,then,proness.nextTick等等)。
3.宏任务中的事件放在callback queue中,由事件触发线程维护。微任务的事件放在微任务队列中,由js引擎线程维护。
运行机制
- 在执行栈中执行一个宏任务。
- 执行过程中遇到微任务,将微任务添加到微任务队列中。
- 当前宏任务执行完毕,开始执行微任务队列中的任务。
- 当前微任务队列中的任务执行完毕,检查渲染,GUI线程接管渲染。
- 渲染完毕后,js线程接管。开启下一次事件循环,执行下一次宏任务(事件队列中取出)。
那怎么知道主线程执行栈为空啊?js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。
1,宏任务
# | 浏览器 | node |
---|---|---|
setTimeOut | √ | √ |
setInterval | √ | √ |
setImmediate | x | √ |
requestAnimationFrame | √ | x |
2,微任务
# | 浏览器 | node |
---|---|---|
process.nextTick | x | √ |
MutationObserver | √ | x |
Promise.then catch finally | √ | √ |
宏任务和微任务之间的关系
案例
setTimeout(() => {
//执行后 回调一个宏事件
console.log('内层宏事件3')
}, 0)
console.log('外层宏事件1');
new Promise((resolve) => {
console.log('外层宏事件2');
resolve()
}).then(() => {
console.log('微事件1');
}).then(()=>{
console.log('微事件2')
})
可以先思考一下,在纸上写下执行顺序和打印结果.
…
我们来看下打印结果吧
外层宏事件1
外层宏事件2
微事件1
微事件2
内层宏事件3
- 首先浏览器执行就是进入第一个宏任务(同步)进入主线程,遇到
setTimeout
,这是一个异步的宏任务,分发到Event Queue
中。 - 遇到
console.log()
自接打印,输出 “外层宏事件1” - 遇到
Promise,new Promise
直接执行,输出,外层宏事件2 - 执行
then
,被分发到微任务Event Queue
中 - 第一轮宏任务执行结束,开始执行微任务,打印 “微事件1” “微事件2”
- 第一轮微任务执行完毕,执行第二轮宏事件,打印
setTimeout
里面内容,“内层宏事件3”
这个例子看懂基本的js执行机制就理解了
//主线程直接执行
console.log('1');
//丢到宏事件队列中
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
//微事件1
process.nextTick(function() {
console.log('6');
})
//主线程直接执行
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
//微事件2
console.log('8')
})
//丢到宏事件队列中
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
- 首先浏览器执行js进入第一个宏任务进入主线程,直接打印
console.log('1')
- 遇到
setTimeout
分发到宏任务Event Queue
中 - 遇到
process, nextTick
丢到微任务Event Queue
中 - 遇到
Promise,new Promise
直接执行,输出console.log('7')
- 执行
then
,被分发到微任务Event Queue
中 - 第一轮宏任务执行借宿,开始执行微任务,打印 6,8
- 第一轮微任务执行完毕,开始执行第二轮宏事件,执行
setTimeout
- 先执行主线程宏任务,在执行微任务,打印2,4,3.5
- 再执行第二个
setTimeout
,同理打印‘9,11,10,12’ - 整段代码,共进行了三次事件循环,完整的输出为‘1,7,6,8,2,4,3,5,9,11,10,12’ 。
以上是在浏览器环境下执行的数据,只作为宏任务和微任务的分析,我在node环境下测试打印出来的顺序为:1,7,6,8,2,4,9,11,3,10,5,12。node
环境执行结果和浏览器执行结果不一致的原因是:浏览器的Event loop
是在HTML5中定义的规范,而node
中则由libuv
库实现。ibuv
库流程大体分为6个阶段:timers,I/O callbacks,idle、prepare,poll,check,close callbacks
,和浏览器的microtask,macrotask
那一套有区别。
参考文档:
https://juejin.cn/post/6844903512845860872
https://www.cnblogs.com/ckAng/p/11133643.html
https://blog.csdn.net/namechenfl/article/details/99623700