EventLoop 事件循环机制

Event Loop在JavaScript中，任务被分为两种，一种宏任务（MacroTask)也叫Task，一种叫微任务（MicroTask)。

Dark_programmer

6825人浏览 · 2020-03-13 22:02:09

Dark_programmer · 2020-03-13 22:02:09 发布

1. EventLoop 概念

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

因为JavaScript就是单线程，也就是说，同一个时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

2.同步任务和异步任务

在讲EventLoop之前，先说一下什么是 同步任务 和 异步任务。

同步任务：函数返回—>拿到预期结果

异步任务：函数返回—>拿不到预期结果，还要通过一定的手段获得结果

简单点说：
同步任务:会立即执行的任务
异步任务:不会立即执行的任务(异步任务又分为宏任务与微任务)

在异步任务中，任务被分为两种，一种宏任务（MacroTask)也叫Task，一种叫微任务（MicroTask)。

宏任务：由宿主对象发起的任务（setTimeout）

宏任务包括 script， setTimeout，setInterval，setImmediate(Node.js)，I/O，postMessage， MessageChannel，UI rendering
微任务：由js引擎发起的任务（promise）

微任务包括 process.nextTick(Node.js)，promise.then()，promise.catch()，MutationObserver。

宏任务与微任务的概念不必强记，理解不了可先记住宏任务和微任务包含哪些情况。

由上述可知，在代码执行的过程中，同步任务会立即执行，异步任务会通过一些手段和过程才会拿到结果。所以在异步任务等待结果的同时，可先执行其后的同步任务。当异步任务有结果的时候，在回过头来执行异步任务。

所以 EventLoop 的执行机制如下：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

话不多说，直接上题

console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end') 
}
async1()

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')

这道题有些繁琐，先放置一下，后面将会对这道题进行讲解。

EvnentLoop执行的机制就是先执行同步代码，接着是微任务，然后是宏任务。

3. EventLoop 执行解析

遇到 Promise
在解答上题之前，先来两道简单点的，小试牛刀一下：
例题 1：

setTimeout(() => {
  console.log('A');
}, 0);
var obj = {
  func: function() {
    setTimeout(function() {
      console.log('B');
    }, 0);
    return new Promise(function(resolve) {
      console.log('C');
      resolve();
    });
  },
};
obj.func().then(function() {
  console.log('D');
});
console.log('E');

根据事件循环机制的执行顺序，上述代码执行步骤如下：

执行 setTimeout ，由于是宏任务，将其放置进宏任务队列，此时宏任务队列为 [ 'A ’ ]
接着执行 obj.func() , 先执行 setTimeout，由于是宏任务，将其放置进宏任务队列，此时宏任务队列为 [ 'A '，'B ’ ]
然后函数返回值是一个 Promise，因为这是一个同步操作，所以先打印出 'C ’
紧接着是 promise.then() , 由于是一个微任务，将其放置进微任务队列，此时微任务队列为 [ 'D ’ ]
接着就会执行同步任务，打印出 'E ’
虽然当前微任务队列与宏任务队列均存在数据，但是微任务永远比宏任务先执行（换句话说 先清掉现存的微任务之后，才会执行宏任务队列），所以先打印 'D ’
然后会执行宏任务，依次打印出来 'A ’ 和 'B ’

所以，这道题的打印顺序就是

C -> E -> D -> A -> B

要注意的是 obj.func().then() 这里，obj.func() 是普通函数/同步代码，后面的 .then() 才是微任务。

例题2：

function go() {
  console.log(5)
}
let p = new Promise(resolve => {
  resolve(1);
  Promise.resolve(go()).then(() => console.log(2));
  console.log(4);
}).then(t => console.log(t));
console.log(3);

上述代码执行步骤如下：

在 new Promise的时候，就会执行内部的方法。首先就是执行 resolve(1) ,将 1 返回到 then 里
紧接着会执行内部的 Promise.resolve( go() ) ，因为这是一个普通函数，是一个同步执行的代码，所以会打印出 5
promise.then()是一个微任务，会将 console.log(2) 放置到微任务队列，此时微任务队列为 [ 2 ]
然后会顺序执行同步任务 console.log(4)，将 4打印出来
然后会执行 new Promise 的 then() 方法，由于这也是一个微任务，所以会放置到微任务列表，此时微任务队列为 [ 2 ，1 ]
顺序执行同步任务 console.log(3)，将 3打印出来
最后，依次打印出微任务队列的 2 和 1

so,上述代码的打印结果为

5 -> 4 -> 3 -> 2 -> 1

要注意的是 Promise.resolve(go()) 这里也是普通函数/同步代码，当执行到这一行的时候，会立即执行 go()，后面的 .then() 才是微任务。

以上两道小题，是关于 Promise 的EventLoop分析。

遇到 async/await
根据定义，我们知道，async/await 仅仅是生成器的语法糖，所以不要怕，只要把它转换成 Promise 的形式即可。

async function foo() {
  console.log(1)
  await bar();
  console.log(2)
}
async function bar() {
   console.log(3)
}
foo();

可以转换成 Promise的形式，如下

 function foo(){
	 console.log(1)
	 Promise.resolve(bar()).then(()=>{
		 console.log(2)
	})
}
function bar(){
	 console.log(3)
}
foo()

执行步骤如下：

执行 foo() ,打印同步代码内容 1
顺序执行 Promise.resolve() ，同步执行 bar() 方法，打印 3
Promise.thenr() 是一个微任务，将其放置到微任务队列，此时微任务队列为[ 2 ]
执行微任务队列，打印队列内容 2

所以执行的顺序是：

1 -> 3 -> 2

所以，开篇的那段代码，可改写成如下：

function async1() {
  console.log('async1 start'); // 2
 
  Promise.resolve(async2()).then(() => {
    console.log('async1 end'); // 6
  });
}
 
function async2() {
  console.log('async2'); // 3
}
 
console.log('script start'); // 1
 
setTimeout(function() {
  console.log('settimeout'); // 8
}, 0);
 
async1();
 
new Promise(function(resolve) {
  console.log('promise1'); // 4
  resolve();
}).then(function() {
  console.log('promise2'); // 7
});
console.log('script end'); // 5

首先打印出 script start
接着将 settimeout 添加到宏任务队列，此时宏任务队列为 [‘settimeout’]
然后执行函数 async1，先打印出 async1 start，又因为 Promise.resolve(async2()) 是同步任务，所以打印出 async2，接着将 async1 end 添加到微任务队列，，此时微任务队列为 [‘async1 end’]
接着打印出 promise1，将 promise2 添加到微任务队列，，此时微任务队列为 [‘async1 end’, promise2]
打印出 script end
因为微任务优先级高于宏任务，所以先依次打印出 async1 end 和 promise2
最后打印出宏任务 settimeout

script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2
-> settimeout

其实，上面的代码都弄清楚之后，对于EventLoop的执行机制就掌握的差不多了。

接下来是一道强化的题，有兴趣的可以看一下

 console.log('1')
      setTimeout(()=>{
          console.log('2');
          new Promise(resolve=>{
            console.log('3')
            resolve();
          }).then(()=>{
            console.log('4')
          })
      },0)
      new Promise(resolve=>{
            console.log('5')
            resolve();
          }).then(()=>{
            console.log('6')
          }) 
      setTimeout(()=>{
          console.log('7');
      },0)   
      setTimeout(()=>{
          console.log('8');
          new Promise(resolve=>{
            console.log('9')
            resolve();
          }).then(()=>{
            console.log('10')
          })
      },0)
      new Promise(resolve=>{
            console.log('11')
            resolve();
          }).then(()=>{
            console.log('12')
          })
      console.log('13');