console.log('start');
setTimeout(() => {
console.log('timeout');
});
Promise.resolve().then(() => {
console.log('resolve');
});
console.log('end');
分析一下:
1)刚开始整个脚本作为一个宏任务来执行,因此先打印start和end
2)setTimeout 作为一个宏任务放入宏任务队列
3)Promise.then作为一个为微任务放入到微任务队列
4)当本次宏任务执行完,检查微任务队列,发现一个Promise.then, 执行
5)接下来进入到下一个宏任务——setTimeout, 执行
因此最后的顺序是:
start
end
resolve
timeout
总结:
1)一开始整段脚本作为第一个宏任务执行
2)执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
3)当前宏任务执行完出队,检查微任务队列,如果有则依次执行,直到微任务队列为空
4)执行浏览器 UI 线程的渲染工作
5)检查是否有Web worker任务,有则执行
6)执行队首新的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空