javascript事件循环

EventLoop

以下内容仅限于自己理解，可能并不全面或者有错误

参考文档：https://www.cnblogs.com/jymz/p/7900439.html

JavaScript的一大特点就是单线程，而这个线程中拥有唯一的一个事件循环

依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。

函数调用栈遵循的是先进后出的原则；

1  一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。

2 任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。

3 macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, XHR回调，事件回调（鼠标键盘事件）。

4 micro-task大概包括:process.nextTick, Promise.then(), MutationObserver(html5新特性)

5 setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。

6 来自不同任务源的任务会进入到不同的任务队列。其中setTimeout与setInterval是同源的。

7 事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task，这样一直循环下去。

8 其中每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈来完成。

看下面的案例

console.log('start')

setTimeout(function() { 

    console.log(timeout1)

 },0)

new Promise(function (resolve) {

   console.log('promise1')

   for (var i = 0; i <1000; i++) {

        i == 99 && resolve()

   }

}).then(function() {

   console.log('then1')

 })

 console.log('global')

具体的执行过程：

首先，事件循环从宏任务开始，从script开始，不同的任务源的任务进入到不同的事件队列；

宏任务timeout1进入setTimeout队列

script执行时遇到Promise实例。Promise构造函数中的第一个参数，是在new的时候执行，因此不会进入任何其他的队列，而是直接在当前任务直接执行了，

如下图

当promise 中的resolve执行完毕，出调用栈后，后续的.then会被分发到micro-task的Promise队列中去；具体如下图

script任务继续往下执行，最后只有一句输出了globa1，然后，全局任务就执行完毕了。

第一个宏任务script 执行完毕后，则开始执行微任务队列中的任务；then1被输出；则第一轮事件循环执行完毕。如下图，script队列为空，微任务队列为空

开始执行第二轮事件循环，第二轮也是从宏任务开始，执行settimeout队列中的任务；

需要注意的是如果settimeou任务中遇到settimeout,任务也会放到settimeout队列，但是要到下一轮事件循环中；

setTimeout(function() {

        console.log('timeout_1');

        setTimeout(function() {

              console.log('timeout_2');

        },0)

  },0);

  setTimeout(function() {

        console.log('timeout_3');

  },0) // 执行结果为 timeout_1 timeout_2 timeout_3

每一轮事件循环会先执行宏任务，宏任务执行完了立刻执行所产生的微任务；比如在settimeout中有promise，则在settimeout中的同步代码被执行完之后立即执行.then()中的代码;

3/不同的任务源的执行顺序

宏任务：

settimeout队列 要比setImmediate队列先执行；

如果settimeout和setImmediate两者都有，则执行完settimeout队列任务以及其所产生的微任务队列，清空所有微任务队列，之后再执行setImmediate任务队列及其产生的的微任务队列。

微任务：

process.nextTick()要比promise的.then()先执行；

如果一个宏任务产生了process.nextTick()和promise的.then()两个微任务队列，则process.nextTick()队列任务执行清空之后,再执行promise的.then()

XHR回调会在数据响应回来插入到事件队列中，而事件回调则会在被触发时插入到事件队列中；