浏览器和Node事件循环的区别
事件循环，是 js 中老生常谈的一个话题了，而在浏览器和 Node 中的事件循环执行机制也不相同，浏览器的事件循环是在 HTML5 中定义的规范，而 Node 中则是由 libuv 库实现，不可以混为一谈。
先看一个简单的事件循环笔试题：
function sleep(time) { let startTime = new Date(); while (new Date() - startTime < time) {} console.log('<--Next Loop-->');
}
setTimeout(() => { console.log('timeout1');
setTimeout(() => { console.log('timeout3');
sleep(1000);
}); new Promise((resolve) => { console.log('timeout1_promise');
resolve();
}).then(() => { console.log('timeout1_then');
});
sleep(1000);
});
setTimeout(() => { console.log('timeout2');
setTimeout(() => { console.log('timeout4');
sleep(1000);
}); new Promise((resolve) => { console.log('timeout2_promise');
resolve();
}).then(() => { console.log('timeout2_then');
});
sleep(1000);
});在不同的环境中，输出的结果也是不同的：
浏览器中的输出：
timeout1
timeout1_promise<--Next Loop-->timeout1_then
timeout2
timeout2_promise<--Next Loop-->timeout2_then
timeout3<--Next Loop-->timeout4<--Next Loop-->
Node 环境中的输出：
timeout1
timeout1_promise<--Next Loop-->timeout2
timeout2_promise<--Next Loop-->timeout1_then
timeout2_then
timeout3<--Next Loop-->timeout4<--Next Loop-->
接下来我们就看看浏览器和 Node 中时间循环的区别是什么。
1. 任务队列
浏览器环境
浏览器环境下的 异步任务 分为 宏任务(macroTask) 和 微任务(microTask)：
宏任务(macroTask)：script 中代码、setTimeout、setInterval、I/O、UI render；
微任务(microTask)： Promise、Object.observe、MutationObserver。
microTask：微任务；
nextTick：process.nextTick；
timers：执行满足条件的 setTimeout 、setInterval 回调；
I/O callbacks：是否有已完成的 I/O 操作的回调函数，来自上一轮的 poll 残留；
poll：等待还没完成的 I/O 事件，会因 timers 和超时时间等结束等待；
check：执行 setImmediate 的回调；
close callbacks：关闭所有的 closing handles ，一些 onclose 事件；
idle/prepare 等等：可忽略。
当满足执行条件时，宏任务(macroTask) 和 微任务(microTask) 会各自被放入对应的队列：宏队列(Macrotask Queue) 和 微队列(Microtask Queue) 中等待执行。
Node 环境
在 Node 环境中 任务类型 相对就比浏览器环境下要复杂一些：
因此，也就产生了执行事件循环相应的任务队列 Timers Queue、I/O Queue、Check Queue 和 Close Queue。
