js事件循环机制

参考博文
图片源自上面的文章:
eventLoop

要点:

1.js是单线程的,但有一个事件循环机制

2.代码执行时,真正执行都是在函数调用栈中执行,在任务队列中等候执行。

3.任务队列分为macro-task(task、宏任务)和micro-task(jobs、微任务)
  macro-task大概包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
  micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
  上面的叫做任务源,或任务分发器,把它们里面的回调函数分发到不同任务队列中去等候执行

4.macro-task和micro-task里面又分成不同类型的任务源,同源的会依次一起执行,例如setTimeout与setInterval同类任务源,放在同一队列;与setImmediate不同源,如上图所示

5.一次事件循环包括宏任务和微任务。顺序是:从script(整体代码,也算一个队列)开始,执行完宏任务中一个队列的可执行任务时(注意不是宏任务所有队列的任务),就执行微任务的所有队列(注意是所有)的可执行任务,一个事件循环结束,之后再选宏任务中下一个队列重新执行循环。

6.setTimeout队列先于setImmediate队列 nextTick队列先于promise的then队列

7.特殊的promise,构造函数里的参数回调是在new之后立即执行的,不再分发到任务队列中,then里面的参数回调要分发

8.注意:不同环境下,执行顺序有所不同。chrome浏览器中,是执行完一个宏任务后就执行微任务了,而node下是执行完一个宏任务队列后再执行微任务