前言
前几天在理解node的事件环机制中引发了我对浏览器里Event Loop的好奇。我们都知道javascript是单线程的，任务是需要一个一个按顺序执行的，如果javascript有两个线程，一个为DOM增加样式，一个却要删除DOM，这样岂不是就会很混乱。单线程可以节约内存，但是必须等待前一个任务完成后才能执行下一个任务。接下来理解浏览器中的Event Loop，先看一张图：
heap（堆）和stack（栈）
heap（堆）是用户主动请求而划分出来的内存区域，比如你new Object()，就是将一个对象存入堆中，可以理解为heap存对象。 stack（栈）是由于函数运行而临时占用的内存区域，函数都存放在栈里。
Event Loop实现过程
在上一张图中:
- 所有同步任务都在主线程上执行，形成一个执行栈；
- 只要异步任务有了运行结果，就在任务队列（task queue）（队列是一个先进先出的数据结构，而栈是一个先进后出的数据结构）之中放置一个事件；
- 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列,又将队列中的事件放到stack中依次执行，就是执行异步任务中的回调函数。这个过程是循环不断的，这就是Event Loop(事件循环)；
宏任务和微任务
在上张图中，我们看到还有宏任务（MacroTask）和微任务（MicroTask）之分。
宏任务（MacroTask） setTimeout setInterval
微任务（MicroTask） Promise.then MessageChannel微任务(vue中nextTick实现原理)
同步任务先执行，遇到微任务 就将微任务放入执行栈 微任务会先执行，再执行宏任务，
先看一下图（个人理解）
举例说明
console.log(1);setTimeout(function(){ console.log(2); new Promise(function(resolve,reject){ console.log('promise'); resolve(); }).then(res=>{ console.log('promise.then'); })});setTimeout(function(){ console.log(4); })console.log(5);复制代码 将这行代码放入浏览器控制台中
分析一下：
- 执行栈中同步任务先执行，先走console.log(1)和console.log(5)；
- 接着是遇到setTimeout将它们的回调函数放入MacroTask(宏任务队列)；
- 然后将任务队列中的回调函数依次放入主执行栈中执行：console.log(2)执行，接着promise立即执行，然后promise.then是微任务放入MicroTask中直接入栈先执行；
- 最后执行第二个setTimeout的回调函数console.log(4)；
Node.js的Event Loop
浏览器中的Event Loop和node的Event Loop有所不同，先来看看区别：
在node环境里，执行栈会先执行完当前任务队列，也就是两个setTimeout中的回调函数执行完才会去执行我们的微任务队列，也就是promise.then是最后执行的，是不是很奇怪。
请看下面的示意图（作者 ）。
这里需要注意一下，node新加了一个微任务(process.nextTick)和一个宏任务(setImmediate)
简单的来说，就是node在处理一个执行队列的时候不管怎样都会先执行完当前队列，然后再清空微任务队列，再去执行下一个队列。
废话不多说，直接上图（个人理解）。
这里应该都明白了吧，最后注意一下，微任务中process.nextTick比promise.then快
水平不足，欢迎各位指正。