这几天去面试,面试官都会问一些js执行机制
第一步宏任务执行,也就是script整体代码执行,把代码分为同步任务和异步任务,同步放在主线程里面执行,异步任务在event table中注册事件,等待主线程里面的代码执行完毕,才会回头来看event table里面有没有任务,如果有,就推进主线程里面。如下图所示:
异步任务也有先后顺序,所以我们把他们分为宏任务和微任务
- 宏任务 包含整个script代码块,setTimeout, setIntval
- 微任务 Promise , process.nextTick
下面来玩玩实例:
console.log('1');
setTimeout(function() {
console.log(2);
})
new Promise(function(resolve) {
console.log(3);
resolve();
}).then(function() {
console.log(4)
})
执行结果是什么呢,我们来分析一下:
1.script整体代码执行,分同步任务,异步任务,这里注意的是new Promise是立即执行的,所以第一个阶段打印 1 3。
2.到微任务 .then 后面就是微任务,打印4
3.最后到宏任务setTimeout 打印 2 所以结果为1 3 4 2
下面再来复杂一点
console.log('1');
setTimeout(function() { //time1
console.log('2');
setTimeout(function() { //time3
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
setTimeout(function() { //time2
console.log(6);
})
new Promise(function(resolve) {
console.log(7);
resolve();
}).then(function() {
console.log(8)
})
1. 分析整体代码,相当一次宏任务,运行同步任务 打印 1 7
2.处理微任务,7 后面的.then是微任务,所以打印8
3.执行time1,打印2,又遇到一个宏任务time3,放在time2后面等着,发现new promise 立即执行 打印4,又发现一个微任务,.then ,打印5.没有微任务了,执行下一个宏任务time2
4.执行time2,打印6,没有发现微任务,执行下一个宏任务time3
5.执行time3 打印3
答案:1 7 8 2 4 5 6 3
经过两次思考,答案呼之欲出
js执行机制事件循环:
1、先执行主线程
2、遇到宏队列(macrotask)放到宏队列(macrotask)
3、遇到微队列(microtask)放到微队列(microtask)
4、主线程执行完毕
5、执行微队列(microtask),微队列(microtask)执行完毕
6、执行一次宏队列(macrotask)中的一个任务,执行完毕
7、执行微队列(microtask),执行完毕
8、依次循环。。。