超详细的EventLoop过程讲解

超详细的EventLoop过程讲解

EventLoop的主要过程：
首先我们需要知道js是单线程的，是基于事件循环。
1. 在主线程执行同步任务的时候，会形成一个执行栈； 2. 当主线程执行完执行栈中的同步任务，会先去执行微任务队列，执行过程中遇到微任务，直接放在队列的最后，直到执行完当前的微任务； 3. 然后主线程去执行宏任务队列中的一个事件（如果最先来的事件还没返回结果，那就去看第二先来的事件是否准备就绪，如果准备就绪就先执行它，否则继续向下找）；在处理宏任务的过程中遇到微任务，会放入微任务队列中， 4. 当该宏任务处理完成之后，会再去执行微任务队列中的事件，执行完成之后才会去宏任务队列中执行，这样就形成了EventLoop，重复这样的过程直到执行完所有的任务。

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

主要的宏任务有：

setTimeout
setInterval
setImmedate
MessageChannel
requestAnimationFrame
I/O
UI交互事件

微任务有：

Promise.then
MutationObserver
Object.observe
process.nextTick

对于process.nextTick和setImmedate两个函数，都是Node.js提供的，因为node.js也是单线程，只不过运行机制和浏览器的不同而已。

在执行的过程中遇到process.nextTick，会将其放在当前执行栈的最后，也就是说它一定会在下一次事件循环前执行。
而对于setImmediate，它和setTimeout(fn,0)类似，总是在下一次EventLoop时执行。 关于这两个函数的详细描述，可以参考阮一峰大佬写的。

如果有什么不足的或错误的地方，还希望看官们及时指出。