任务执行顺序:宏任务 -> 微任务 -> 浏览器渲染 -> 下一个宏任务...
宏任务(macro task)
包括:
- script(整体代码) **不要漏了!!!(一般第一个宏任务都是script)
- setTimeout **常用
- setInterval **常用
- I/O
- UI交互事件
- postMessage
- MessageChannel
- setImmediate(Node.js 环境)
微任务(micro task)
包括:
- Promise.then ***常用 (注意then()方法才是微任务,而Promise实例中的代码则是同步代码,会直接执行)
- Object.observe
- MutationObserver
- process.nextTick(Node.js 环境)
举个例子:
// 宏任务&微任务
const second = () => console.log('second')
const last = () => console.log('last')
const fun = () => {
console.log('first')
setTimeout(last, 0)
new Promise((resolve, reject) =>
resolve(value = 'third')
).then(value => console.log(value))
second()
}
fun()
按照first, second, third, last的顺序输出。
分析:执行宏任务fun(),输出first,碰到宏任务setTimeout(),丢进栈,碰到微任务promise.then(),丢进栈,调用second()。至此第一遍宏任务执行完毕,开始执行微任务promise.then(),渲染浏览器。开始执行第二个宏任务setTimeout()。