宏任务与微任务

26 阅读1分钟

宏任务与微任务

我们都知道js是单线程语言,一旦其中某个任务耗时过长,后面的任务也必须等着,那可能会造成一些页面的显示问题,我们现在把js任务分为两类:同步任务和异步任务。

同步代码:立即放入js引擎(js主线程,执行栈)执行,并原地等待结果
异步代码:先放入宿主环境(浏览器/Node),不必原地等待结果,并不阻塞主线程继续往下执行,异步结果在将来执行

下面我们来看一段代码:

console.log(1)
 setTimeout(()=>{
   console.log(2)
   },0)
 console.log(3)

执行过程: 先将同步代码交给js引擎执行,异步代码交给宿主环境 同步代码放入执行栈中,异步代码等待时机成熟送入任务队列排队 执行栈执行完毕,会去任务队列看是否有异步任务,有就推送到执行栈中执行,反复执行查看执行,这个过程就是事件循环(eventLoop)

16DB3E72-7D4E-4ae1-B73E-DC07014393F4.png

js异步任务可以分为宏任务和微任务

在es5之后,js就引入了promise,这样就不需要浏览器,js引擎自身就能够发起异步任务了

宏任务:由宿主环境,node或者浏览器发起的 微任务:由js引擎发起的任务 执行顺序:

先同步代码(js执行栈,回调栈)
再微任务的异步代码(js引擎)
宏任务的异步代码(宿主环境)
标题代码备注
宏任务script代码块,setTimeout,setInterval,setImmediat
微任务promise,process.nextTick,promise.then(),promise.catch(),async/await,object.observepromise本身是同步的,then/catch的回调函数是异步的