宏任务（macrotask ）和微任务（microtask ）

宏任务和微任务都是我们在开发工作中经常用到的。

宏任务（macrotask ）和微任务（microtask ）

macrotask 和 microtask 表示异步任务的两种分类。
在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。

“先查看是否有事件可执行”，如果有这优先级限制，那应该可以这样理解：

其实并不止一个消息队列，有异步队列和事件队列，而事件队列总是优先于异步队列被空闲下来的JS线程取用
宏任务一般是：包括整体代码script，setTimeout，setInterval、I/O、UI render。
微任务主要是：Promise、Object.observe、MutationObserver。

  • 宏任务和微任务之间的关系

JS中的宏任务和微任务的区别和用法 - 图1
宏任务和微任务之间的关系

区别体现demo

  • 1.Promise在前，setTimeout在后
  1. new Promise((resolve) => {
  2.     console.log('外层宏事件2');
  3.     resolve()
  4. }).then(() => {
  5.     console.log('微事件1');
  6. }).then(()=>{
  7.     console.log('微事件2')
  8. })
  9. console.log('外层宏事件1');
  10. setTimeout(() => {
  11.     //执行后 回调一个宏事件
  12.     console.log('内层宏事件3')
  13. }, 0)

结果：

  1. 外层宏事件2
  2. 外层宏事件1
  3. 微事件1
  4. 微事件2
  5. 内层宏事件3
  • 2.setTimeout在前，Promise在后
  1. setTimeout(() => {
  2.     //执行后 回调一个宏事件
  3.     console.log('内层宏事件3')
  4. }, 0)
  5. console.log('外层宏事件1');
  6. new Promise((resolve) => {
  7.     console.log('外层宏事件2');
  8.     resolve()
  9. }).then(() => {
  10.     console.log('微事件1');
  11. }).then(()=>{
  12.     console.log('微事件2')
  13. })

结果：

  1. 外层宏事件1
  2. 外层宏事件2
  3. 微事件1
  4. 微事件2
  5. 内层宏事件3

NodeJS的宏任务和微任务跟浏览器环境又有什么区别

浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现。libuv库流程大体分为6个阶段：timers，I/O callbacks，idle、prepare，poll，check，close callbacks，和浏览器的microtask，macrotask那一套有区别。
两者执行的规则不同，所以不相同。

  1. //            js event loop (指主线程从“任务队列”中循环读取任务)
  2. //
  3. //             event queue 可能同时不止一个
  4. //
  5. //            宏任务（macrotask）event queue （macro-task(宏任务)：script(主程序代码),，setTimeout，setInterval, I/O, setImmediate(node环境),UI rendering）
  6. //            ^
  7. //            | 异步
  8. //     主线程->
  9. //          | |  异步
  10. //          | V
  11. //          | 微任务(microtask) event queue (micro-task(微任务)：Promise，process.nextTick（node环境），Object.observe, MutationObserver)
  12. //          |
  13. //          V
  14. //          如果是浏览器环境 click等事件队列总是优先于异步队列被空闲下来的JS线程取用
  15. // 执行顺序   script(主程序代码)—>process.nextTick—>Promises…——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering
  16. // nextTick 优先级比 Promise 等 microTask 高，setTimeout和setInterval优先级比setImmediate高

浏览器环境

浏览器环境下的 异步任务 分为 宏任务(macroTask) 和 微任务(microTask)：
宏任务(macroTask)：script 中代码、setTimeout、setInterval、I/O、UI render；
微任务(microTask)： Promise、Object.observe、MutationObserver。
当满足执行条件时，宏任务(macroTask) 和 微任务(microTask) 会各自被放入对应的队列：宏队列(Macrotask Queue) 和 微队列(Microtask Queue) 中等待执行。

Node 环境

在 Node 环境中 任务类型 相对就比浏览器环境下要复杂一些：
microTask：微任务；
nextTick：process.nextTick；
timers：执行满足条件的 setTimeout 、setInterval 回调；
I/O callbacks：是否有已完成的 I/O 操作的回调函数，来自上一轮的 poll 残留；
poll：等待还没完成的 I/O 事件，会因 timers 和超时时间等结束等待；
check：执行 setImmediate 的回调；
close callbacks：关闭所有的 closing handles ，一些 onclose 事件；
idle/prepare 等等：可忽略。
因此，也就产生了执行事件循环相应的任务队列 Timers Queue、I/O Queue、Check Queue 和 Close Queue。
2.执行过程
浏览器环境
先执行<script>中的同步任务，然后所有微任务，一个宏任务，所有微任务，一个宏任务……
执行完主执行线程中的任务；
取出 Microtask Queue 中任务执行直到清空；
取出 Macrotask Queue 中一个任务执行；
重复 2 和 3 。
需要 注意 的是：
在浏览器页面中可以认为初始执行线程中没有代码，每一个<script>中的代码是一个独立的 task ，即会执行完前面的<script>中创建的 microTask 再执行后面的<script>中的同步代码；
如果 microTask 一直被添加，则会继续执行 microTask ，“卡死” macroTask；
部分版本浏览器有执行顺序与上述不符的情况，可能是不符合标准或 js 与 html 部分标准冲突；
Promise 的then和catch才是 microTask ，本身的内部代码不是；
个别浏览器独有API未列出。
Node 环境
循环之前
在进入第一次循环之前，会先进行如下操作：
同步任务；
发出异步请求；
规划定时器生效的时间；
执行process.nextTick()。
开始循环
循环中进行的操作：
清空当前循环内的 Timers Queue，清空 NextTick Queue，清空 Microtask Queue；
清空当前循环内的 I/O Queue，清空NextTick Queue，清空 Microtask Queue；
清空当前循环内的 Check Queue，清空 NextTick Queue，清空 Microtask Queue；
清空当前循环内的 Close Queue，清空 NextTick Queue，清空Microtask Queue；
进入下轮循环。
可以看出，nextTick 优先级比 Promise 等 microTask 高，setTimeout和setInterval优先级比setImmediate高。
注意
在整个过程中，需要 注意 的是：
如果在 timers 阶段执行时创建了setImmediate 则会在此轮循环的 check 阶段执行，如果在 timers 阶段创建了setTimeout，由于 timers 已取出完毕，则会进入下轮循环，check 阶段创建 timers 任务同理；
setTimeout优先级比setImmediate高，但是由于setTimeout(fn,0)的真正延迟不可能完全为 0 秒，可能出现先创建的setTimeout(fn,0)而比setImmediate的回调后执行的情况。