JavaScript 微任务、宏任务、事件循环

微任务

• queueMicrotask
• Promise

queueMicrotask(() => {
    console.log("queue micro task")
})

Promise.resolve().then(value => {
    console.log("Promise resolve")
})

宏任务

• setTimeout
• setInterval

setTimeout(() => {
    console.log("setTimeout")
}, 0)

setInterval(() => {
    console.log("setInterval")
}, 1000)

事件循环

执行顺序

1. 执行同步代码
2. 执行微任务（本轮事件循环中，会执行完所有微任务）
3. 渲染UI
4. 执行宏任务（一轮事件循环只处理一个宏任务）

微任务与宏任务的区别

微任务

• 执行优先级比宏任务高
• 一轮事件循环会执行所有的微任务
• 在渲染UI逻辑前执行微任务

宏任务

• 一轮事件循环只执行一个宏任务
• 在渲染UI逻辑后执行宏任务