在讲Event loop之前，我们先思索一个题目

js为何是单线程？

缘由多是假如js是多线程，在多个线程中处置惩罚DOM就可能会发作题目（一个线程增添新节点，另一个线程中删除节点），固然能够引入读写锁处理这个题目

好了，接下来我们最先讲Event loop

简朴的说，就是js在实行的历程中会发生实行环境，这些实行环境会被递次的加入到实行栈中。假如碰到异步的代码，会被挂起并加入到Task（有多种Task）行列中。一旦实行栈为空，Event Loop就会从Task行列中拿出须要实行的代码并放入实行栈中实行，所以本质上来讲，js中的异步行动照样同步的。

我们看下以下代码，以下代码输出’1′, ‘3’, ‘2’

console.log('1');
setTimeout(()=>{
  console.log('2');
}, 0);
console.log('3');
//'1'
//'3'
//'2'

之前对setTimeout明白有误差，虽然设置了为0，实在照样异步，是由于html5规范划定这个函数的第二个参数不得小于4ms，不足会自动增添。

Task行列分为两种

• 微使命microtask，es6中称为jobs。以下这些行动属于微使命

  • process.nextTick
  • promise
  • Object.observe
  • MutationObserver

• 宏使命macrotask，es6中称为task。以下这些行动属于宏使命

  • script
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI rendering

误区：很多人以为微使命快于宏使命，实际上是毛病的。由于宏使命汇中包含了script，浏览器会先实行一个宏使命，接下来有异步代码的话就先实行微使命。

准确的一次Event loop递次应该是如许的：

1. 实行同步代码（这属于宏使命）
2. 实行栈为空，查询是不是有微使命须要实行
3. 实行一切微使命
4. 必要的话衬着UI
5. 最先下一轮Event loop，实行宏使命中的异步代码

经由过程上述的Event loop递次可知，假如宏使命中的异步代码有大批的盘算而且须要操纵DOM的话，为了更快的界面相应，我们能够把操纵DOM放入微使命中。