js event-loop

单线程

js是单线程是众所周知的事情，那么为什么js会被设计成单线程呢。因为如果js为多线程的话。如果一个线程在读取一个dom的信息。另一个线程是要把这个dom删除。这样就会造成混乱。所以js被设计成单线程的。

异步

那么由于js是单线程的。如果遇到ajax请求或者io操作的话。这个线程如果一直在等着请求返回。有可能这个返回时间也特别长。那么这个资源就一直消耗在这等待。所以js有了异步的的概念。任务也分为同步任务和异步任务两种

event-loop

（1）所有同步任务都在主线程上执行，形成一个执行栈
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

注意："任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。而异步任务一般都有回调函数。当主线程开始执行异步任务，就是执行对应的回调函数。如果遇到定时器会检查他的时间后执行。

bg2014100802.png

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

当执行以下方法函数，将把其callback推到宏任务队列中

1. setTimeout、setInterval和setImmediate
2. I/O操作、UI渲染、script脚本执行
3. MessageChannel(Vue的nexttick有使用)

同理，不过是推到微任务队列

1. Promise
2. MutationObserver
3. process.nextTick (Node)

在每次eventloop的时候会先执行微任务再执行宏任务。

process.nextTick和setImmediate

process.nextTick方法可以在当前"执行栈"的尾部----下一次Event Loop（主线程读取"任务队列"）之前。也就是说，它指定的任务总是发生在所有异步任务之前

1.jpg

setImmediate方法则是在当前"任务队列"的尾部添加事件，也就是说，它指定的任务总是在下一次Event Loop时执行，这与setTimeout(fn, 0)很像

3.jpg

process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);}); 
});

setTimeout(function timeout() {
  console.log(3);
}, 0)
// 1
// 2
// 3

不论nextTick嵌套了多深。都会在下次EventLoop之前执行。所以如果递归调用nextTick时，node会报错。因为会卡死。而setImmediate嵌套多层也会在多个eventloop中执行。每写一个嵌套就多一次eventloop

setImmediate和setTimeout

setImmediate(function A() {
  console.log(1);
  setImmediate(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log(3);
}, 0);

如果只有setTimeout、setImmediate在主函数中时。执行顺序是随机的。。

setImmediate(function (){
  setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){console.log(2);});
  });

  setTimeout(function timeout() {
    console.log(3);
  }, 0);
});
// 1
// 3
// 2

如果在setImmediate的递归中同时存在setTimeout和setImmediate。这时的setImmediate总是在setTimeout之前执行

setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){console.log(2);});
});
  
setTimeout(function timeout() {
    console.log(3);
}, 0);
process.nextTick(()=>{console.log(4)})
// 4 3 1 2

还有种情况 如果主函数中写了其他的微任务（promise或者process.nextTick）。则总是setTimeout优先于setImmediate执行的。具体原因参考setTimeout和setImmediate区别

总结

process.nextTick()，效率最高，消费资源小，但会阻塞CPU的后续调用；
setTimeout()，精确度不高，可能有延迟执行的情况发生，且因为动用了红黑树，所以消耗资源大；
setImmediate()，消耗的资源小，也不会造成阻塞，但效率也是最低的。

实际举例

console.log(1);
setTimeout(() => {
    console.log(2);
    process.nextTick(() => {
        console.log(3);
    })
    new Promise((resolve) => {
        console.log(4);
        resolve()
    }).then(() => {
        console.log(5)
    })
})
new Promise((resolve) => {
    console.log(6);
    resolve();
}).then(() => {
    console.log(7);
})
process.nextTick(() => {
    console.log(8);
})
setImmediate(() => {
    console.log(9);
})
new Promise((resolve) => {
    console.log(10);
    resolve();
}).then(() => {
    console.log(11);
})
setTimeout(() => {
    console.log(12);
    setImmediate(() => {
        console.log(13);
    })
    process.nextTick(() => {
        console.log(14);
    })
    new Promise((resolve) => {
        console.log(15);
        resolve();
    }).then(() => {
        console.log(16);
    })
})
process.nextTick(() => {
    console.log(17)
})
// 1 6 10 8 17 7 11 2 4 12 15 3 14 5 16 9 13

执行栈执行：

1. 执行同步任务 打印1
2. 遇到setTimeout放入宏任务队列中。
3. 遇到new promise时，new promise参数中的函数会立即执行。打印6，并且将状态置为resolve成功。这时候将then中的回调函数放入微任务队列中。
4. 遇到process.nextTick会放入下次eventloop之前。所有的异步任务之前
5. 遇到setImmediate会放入异步任务最后
6. 再遇到new promise同理，打印10，并且将then中回调放入微任务队列中
7. 遇到setTimeout放入宏任务队列中
8. 最后遇到process.nextTick会放入下次eventloop之前
   执行栈结束

第一次eventLoop

9. 找到process.nextTick放入的任务执行。执行8 17
10. 取出微任务队列中的任务执行。执行7 11
11. 取出宏任务队列中的任务执行。先执行

setTimeout(() => {
    console.log(2);
    process.nextTick(() => {
        console.log(3);
    })
    new Promise((resolve) => {
        console.log(4);
        resolve()
    }).then(() => {
        console.log(5)
    })
})

12. 打印2
13. 将process.nextTick放入下次eventloop之前
14. new promise参数中的函数立即执行，打印4。将then中的回调放入微任务队列
15. 再执行

setTimeout(() => {
    console.log(12);
    setImmediate(() => {
        console.log(13);
    })
    process.nextTick(() => {
        console.log(14);
    })
    new Promise((resolve) => {
        console.log(15);
        resolve();
    }).then(() => {
        console.log(16);
    })
})

16. 打印12
17. 将setImmediate放入所有异步任务最后等待
18. 将process.nextTick放入下次eventloop之前
19. new promise参数的函数立即执行，打印15。将then中的回调放入微任务队列
    第一次eventLoop结束

第二次eventLoop

20. 先执行process.nextTick的任务 。打印3 14
21. 发现微任务队列中还有上一轮加入的任务。打印5 16
22. 所以异步任务队列中没有任务了。最后执行setImmediate任务 打印 9 13