执行顺序:
javaScript的单线程机制,会执行完所有同步任务,再去执行队列中的任务
相同类型的任务,从上往下执行
不同类型:微队列任务优先级高于宏队列任务
(1)会先执行完所有微队列任务,再去执行宏队列任务
(2)每次准备取出执行下一个宏队列任务之前,都要将微队列中的任务全部取出来执行
宏队列任务:dom回调、ajax回调、定时器回调、dom渲染等,是由浏览器规定的
微队列任务:Promise回调、mutationObserver回调、await 后面的函数是同步的,下方的剩余代码是微任务、process.nextTick等,是由es6规定的
其中:
微队列中的微队列会被放进已存在的微队列栈的最后,而非在其父微队列任务其后执行,具体看第二个示例代码
Promise中的方法是同步调用的,.then的回调才是异步
event-loop事件循环:
同步代码放到call stack中执行,然后执行微任务,再进行dom渲染,宏任务会等待到调用时移动到call queue中,若call stack空掉了,event-loop开始工作,轮询查找call queue,若有则移动到call stack,然后继续轮询
//执行结果:3-4-1-2-h1-3-h2
setTimeout(() => {
console.log('h1');
Promise.resolve(3).then((res) => {
console.log(res);
})
}, 0)
setTimeout(() => {
console.log('h2');
}, 0)
new Promise(() => {
console.log(3);
})
Promise.resolve(1).then((res) => {
console.log(res);
})
Promise.resolve(2).then((res) => {
console.log(res);
})
console.log(4);
执行结果:1-7-2-3-8-4-6-5-0
先执行同步任务1,然后将之后的.then中的方法参数放进微队列
->然后执行同步任务7,将7后的.then方法参数放进微队列
->执行1后放的微队列->输出同步结果2、3->将3之后.then的方法参数放进微队列
->执行7后的微任务,输出8
->将4回调放进微队列,因为5依赖4的结果,所以先往后执行,将6的回调参数放进微队列
->然后再将5放进微队列->最后执行宏队列0
