JS05-宏任务和微任务

宏任务(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渲染

event 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渲染。