宏任务(macroTask)/微任务(microTask)

console.log(100)      //1
setTimeout(() => {              //宏任务
  console.log(200)    //4
})
Promise.resolve().then(() => {  //微任务
  console.log(300)    //3
})
console.log(400)      //2

微任务执行时机比宏任务早

微任务

Promise async/await

宏任务

setTimeout,setInterval,Ajax,DOM事件

event loop和DOM渲染

evevt loop(事件循环)的机制

异步基于回调实现，event loop是异步回调的实现原理
先执行同步代码，再执行异步

步骤

同步代码一行一行放到call stack中执行
遇到异步，先记录下来，等待时机（定时到达，网络请求）
时机到了就移动到callback quene
若call stack为空，则event loop进行查询
轮询查找callback quene，如果有则移动到call stack中执行
继续轮询查找

dom事件和event loop

dom事件（不是异步）也使用回调，基于event loop
event loop 和 DOM渲染共用一个线程

宏任务和微任务区别

宏任务在DOM渲染后触发，如setTimeout
微任务在DOM渲染前触发，如promise

WHY

微任务是ES6语法规定的
宏任务是由浏览器规定的

setTimeout（宏任务执行顺序）

遇到setTimeout，先放入Web API中，等待时机，到时机之后放入callback quene中等待event loop调用。

步骤： event loop在每检查一次call stack为空时就会尝试一次DOM渲染。

Promise（微任务执行顺序）

遇到promise，放入微任务队列（micro task quene）中，不会经过Web API。

步骤： event loop在检查微任务队列时，会先将call stack清空，一口气执行完所有微任务在尝试DOM渲染。

宏任务微任务详解