事件循环机制整体流程是什么
JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程,我们称为事件循环过程。一个线程中,事件循环是唯一的,但是任务队列可以拥有多个。任务队列又分为macro-task(宏任务)与micro-task(微任务),在最新标准中,它们被分别称为task与jobs。
macro-task
- script(整体代码)
- setTimeout
- setInterval
- setImmediate
- I/O
- UI render
micro-task
- process.nextTick
- Promise
- Async/Await(实际就是promise)
- MutationObserver(html5新特性)
执行机制
执行宏任务,边执行边寻找任务,放入各自队列,然后执行该宏任务产生的微任务,若微任务在执行过程中产生了新的微任务,则继续执行微任务,微任务执行完毕后,再回到宏任务中进行下一轮循环
例子
console.log('script start')//h1 1
async function async1() {
await async2()
console.log('async1 end')//w1--6
}
async function async2() {
console.log('async2 end')//2
}
async1()
console.log(111)//3
setTimeout(function() {
console.log('setTimeout')//h2--9
}, 0)
new Promise(resolve => {
console.log('Promise')//4
resolve()
})
.then(function() {
console.log('promise1')//w2--7
})
.then(function() {
console.log('promise2')//w3--8
})
console.log('script end')//5
开始执行宏任务输出h1-1,执行async1输出2,将微任务w1放入队列,输出3,将宏任务h2放入队列,输出4,输出5至此第一个宏任务结束,开始查找微任务队列,输出w1-6,w2-7,w3-8,没有微任务了输出宏任务h2-9