js是单线程的语言,但是在实际的运行中存在着同步任务和异步任务。在运行过程中,在js引擎执行js的过程中,如果遇到异步任务的时候,就交给事件处理线程(Web APIs),由事件处理线程根据其性质分别放入不同的任务队列中。
js的任务分为Macro Task(宏任务)Micro Task(微任务),
macrotask包括:script(整体代码片段)、setTimeout、setInterval、I/O、UI交互、setImmediate(Node.js 环境)
microtask包括:Promise、MutaionObserver、process.nextTick(Node.js 环境)
当主线程运行完一个宏任务后,会循环微任务队列并执行,之后判断微任务队列是否为空,如果不为空继续执行,如果为空则去访问宏任务队列继续执行下一个宏任务。直到两个队列都清空。
事例:
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function() {
console.log('setTimeout')
}, 0)
async1()
new Promise(function(resolve) {
console.log('promise1')
resolve()
}).then(function() {
console.log('promise2')
})
console.log('script end')
结果:script start; async1 start; async2; promise1; script end; async1 end; promise2; setTimeout;
(注:await会阻塞后面代码的执行,用一个匿名函数包裹await
语句之后的代码作为一个微任务事件)
参考:
前端开发都应该懂的事件循环(event loop)以及异步执行顺序(setTimeout、promise和async/await)