Event Loop详解

1.知识储备

• js是一门单线程语言，即同一时间只能执行一个任务；

• 回调函数

  字面上的理解，回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。一般回调函数都是解决异步问题的
  其实也很好理解对吧，回调，回调，就是回头调用的意思。主函数的事先干完，回头再调用传进来的那个函数。
  举一个别人举过的例子：约会结束后你送你女朋友回家，离别时，你肯定会说：“到家了给我发条信息，我很担心你。” 对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。
  其实这就是一个回调的过程。你留了个参数函数（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是主函数。
  她必须先回到家以后，主函数执行完了，再执行传进去的函数，然后你就收到一条信息了。

• 队列（queue）

  队列是一种 FIFO （First In First Out )的数据结构，特点是先进先出；

• 栈（stack）

  栈是一种LIFO (Last In First Out)数据结构，即先进后出；

• 事件表格（event table）

  Event Table 可以理解为一种 事件---回调函数 的对应表

• 事件队列 （event queue）

  就是 回调函数 队列，所以也叫callback queue；

  当event table中的事件被触发，事件对应的回调函数就会被push进这个event queue，然后等待被主线程调用执行；

js引擎首先判断代码是同步还是异步，同步就进入主线程,
异步事件会先进入Event Table并注册为函数
当异步任务指定的事情完成以后，才会将函数移入事件队列中
所以其实事件队列中就是等待被执行的回调函数 (所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。)

event-loop10.png

• 执行栈（也叫调用栈) call stack

  当我们调用一个方法时，js会生成一个与这个方法相对应的执行环境，也叫做执行上下文。这个执行环境中存在着这个方法的私有作用域，参数，this对象等等。因为js 是单线程的，同一时间只能执行一个方法，所以当一系列的方法被调用时，js会先解析这些方法，把其中的同步任务按执行顺序排列到一个地方，这个地方叫做执行栈。Event loop会一直检查call stack 中是否有函数需要执行，如果有，就从栈顶依次执行。同时，如果在过程中发现其他函数，继续入栈然后执行。

2.JS的运行机制

1. 所有同步任务都在主线程上执行，形成一个执行栈；

2. 除了主线程外，还存在一个或多个‘任务队列’，用来存放异步函数；

3. 一旦‘执行栈’中的所有同步任务执行完毕，系统都会读取 ‘任务队列’ 中有没有任务，如果有，就读取执行，一直循环 读取-执行 操作

3.JS中有两种异步任务

• 宏任务

• 微任务

  宏任务是由宿主发起的，而微任务由JavaScript自身发起。

event-loop.png

注意： 微任务永远在宏任务之前执行

4.Event Loop具体执行步骤

注意：Promise中，then中的才是异步的微任务，主体方法是同步任务

eventloop2.png

Event Loop的事件执行顺序图：

event-loop8.jpg

上图可知：

一轮事件轮询中，微任务永远在宏任务之前执行（如果有微任务的话）

• 总结：

  先处理主线程上的同步任务，在执行异步任务，而异步任务分为 宏任务和微任务，其中微任务永远在宏任务之前执行。

  同步任务--(微任务--宏任务)-->下一轮...

5.具体例子

event-loop4.png

例子二（复杂）

event-loop5.png

解析如下：

event-loop6.png event-loop7.png