事件循环机制(Event loop)宏任务(macro-task)微任务(micro-task)

前言：

首先我们先回顾一下几个简单的知识点

1 进程与线程的关系

进程：程序的一次执行，他占有一片独有的内存空间

线程：CPU的基本调度单位，是程序执行的一个完整流程

关系：

一个进程中一般至少有一个运行的线程——主线程

一个进程中也可以同时运行多个线程

多个进程之间的数据是不能同时直接共享的

2 JS 是单线程还是多线程？

先看一段代码块

// 最后执行顺序 结果： 正常1，f2 ，正常2，f1，定时器；

众所周知：JS是一门单线程语言 就像上面的代码块 任务是一个一个列队的形式被调用的

在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。

既然js是单线程 那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着

3 为什么js是单线程的？

假设JS是多线程的 会发生什么

试想一下 如果javascript是多线程的，那么当两个线程同时对dom进行一项操作，

例如一个向其添加事件，而另一个删除了这个dom，此时该如何处理呢？

因此，为了保证不会 发生类似于这个例子中的情景，javascript选择只用一个主线程来执行代码，这样就保证了程序执行的一致性。

4 那么既然是单线程 为什么定时器可以没有按照顺序执行呢？

为什么在接口请求的时候 可以同时发起多个请求呢？

这里就涉及到 同步和异步情况这也正是我们今天的重点内容，事件循环机制（event loop）

 带着这个问题 我们进入下面的内容

正文：

1.执行栈与事件队列

执行栈：当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。

这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。

而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

事件队列：当一个脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。

如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。

当这个执行环境中的代码 执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。

这个过程反复进行，直到执行栈中的代码全部执行完毕。

一个方法执行会向执行栈中加入这个方法的执行环境，在这个执行环境中还可以调用其他方法，甚至是自己，其结果不过是在执行栈中再添加一个执行环境。

这个过程可以是无限进行下去的，除非发生了栈溢出，即超过了所能使用内存的最大值。（这就是为什么递归容易出现栈溢出的原因）

以上的过程说的都是同步代码的执行。那么当一个异步代码（如发送ajax请求数据）执行后会如何呢？

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。

当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。

事件循环： 被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。

如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，

这样就形成了一个无限的循环。这就是这个过程被称为 事件循环（Event Loop）；

在代码执行的时候 是先执行同步代码 再执行异步代码的；

图上标志的JS模块，是我们编写的代码。

按照顺序执行完后（即同步代码执行完），

其代码里定时器的回调函数，Dom事件的回调函数，Ajax请求的回调函数等这些异步代码，

会由浏览器WebAPIs管理模块里的对应模块相应管理。当这些回调函数，到达要执行的条件（比如定时器到时间了，用户点击了），会由相应的模块送到队列里，然后执行。

在列队(callBack Queue)里面 -谁先放进去，就谁先执行;

接下来我们看下面一段代码块

分析：

定时器的第二个参数是0，即立马放进了队列里，

Promise也是立马达到了满足条件。也会放进队列里，又根据代码的先后执行顺序，队列里肯定先放定时器的回调函数，再放Promise的回调函数，

等同步代码执行完后，异步代码就是先执行定时器里回调函数，再执行Promise里的回调函数。控制台输出应该是1 3 2才对啊！！！

可是为啥是 1 2 3 呢？？？

这就引出了我们今天所学的第二个重点内容？宏任务（macro-task）与微任务（micro-task）

先看下面这个图

**==** （ps:上图的标注的分线程是浏览器的，不是我们的Js代码的。我们只是写的代码交给了浏览器管理）;

在图里面我们可以看到队列里又进行了划分，又分为宏队列与微队列

宏队列里放的是宏任务

微队列里放的是微任务

其Promise 和 Mutation（vue里会遇到mutation）里的回调函数，会放进微对列里

微队列优先级是高于宏队列优先级

so: 这个就可以解释上线的代码块输出的是 1 2 3了

下面我们再看一段代码块

因为：每执行一个宏任务时，都会检查微队列中是否有待执行的的回调，优先执行微任务 也就是微任务是可以插队的

结尾：

javascrit的事件循环是这门语言中非常重要且基础的概念。

清楚的了解了事件循环的执行顺序和每一个阶段的特点，可以使我们对一段异步代码的执行顺序有一个清晰的认识，

从而减少代码运行的不确定性。合理的使用各种延迟事件的方法，有助于代码更好的按照其优先级去执行。