宏任务、微任务

宏任务

• script(整体代码)
• setTimeout
• setInterval
• I/O
• UI交互事件
• postMessage
• MessageChannel
• setImmediate(Node.js 环境)

微任务

• Promise.then
• Object.observe
• MutationObserver
• process.nextTick(Node.js 环境)

运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

console.log('event start 1')
setTimeout(function () {
  console.log('setTimeout 5'); // 遇到 setTimeout, 回调进入到宏任务队列上
});

new Promise(function (resolve, reject) {
  console.log('promise start 2')// 遇到 Promise, 立即执行, then 函数进入到微任务队列
  resolve()
}).then(function () {
  console.log('promise end 4') // 同步代码执行结束, 主线程检查是否存在微任务, 发现 then, 执行
})
console.log('event end 3')