JS执行机制 宏任务微任务

---

前言

这篇文章主要介绍JS的执行机制以及宏任务与微任务

一、JS的执行机制

文字解释

js代码在执行后会把任务分类为同步任务和异步任务  JS优先执行同步

主线程执行栈会优先执行同步任务 异步任务会被放入一个特殊的处理程序中 满足条件会被放入任务队列等待

直到同步任务都被执行完  就会去队列找优先满足条件的异步任务 放入主线程执行

常见异步

事件   定时器     Ajax请求     文件操作

---

二、宏任务与微任务

宏任务: 一个文件里可以会有多个宏任务,

• 首先一整个js代码块为第一个宏任务

• setTimeout

• setInterval

• Ajax

• 事件

微任务:  宏任务中的一个部分,它的执行时机是在同步代码执行之后,下一个宏任务执行之前。总结起来,微任务有：

- Promise.then

- Promise async/await 

- process.nextTick(Node.js 环境)

宏任务和微任务执行机制

JS优先执行同步任务，然后执行微任务，最后执行宏任务。

总结：执行完第一个宏任务，准备执行第二个宏任务的时候要看看微任务队列中有没有可执行的微任务，如果有，优先将微任务执行完成

---

三、代码演示

setTimeout(() => {    //宏任务
  console.log('1')
}, 0)
console.log('2');   //同步任务

new Promise((resolve) => { 
  console.log('3');  //同步任务
  resolve()
}).then(() => {
  console.log('4');  //微任务
}).then(()=>{
  console.log('5')   //微任务
})
console.log('6')   //同步任务
// 2 3 6 4 5 1

分析:

setTimeout()是宏任务,被放入一个特殊的处理程序中 满足条件会被放入任务队列等待.  所以先打印同步任务 2 和 3 , then是微任务,是在同步代码执行之后,下一个宏任务执行之前,此时第一个宏任务还有同步任务未执行完毕(一整个js代码块为第一个宏任务). 所以会先打印 6 ,再执行微任务. 最后执行第二个宏任务