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

宏任务:setTimeout,setInterval,ajax,DOM事件
微任务:Promise,async/await
微任务执行时机比宏任务早
console.log(100)
//宏任务
setTimeout(()=>{
    console.log(200)
})
//微任务
Promise.resolve.then(()=>{
    console.log(300)
})
console.log(400)
//打印顺序:100,400,300,200

image.png

为什么微任务比宏任务执行的早

  1. 宏任务:DOM渲染后触发,如setTimeOut
  2. 微任务:DOM渲染前触发,如Promise

宏任务和微任务的根本区别

  1. 宏任务是浏览器规定的;
  2. 微任务是es6语法规定的;
  3. 微任务等待时机放在micro task queue中,首先执行同步代码,当代码执行完成,call stack清空之后,执行当前的微任务,再尝试DOM渲染,最后触发event loop机制;

image.png

阅读 184

推荐阅读