JavaScript特点是”非阻塞“，V8引擎通过事件循环event loop来实现这一特点。

1. 执行栈与事件队列

当javaScript代码执行的时候会将不同的变量存于内存中的不同位置：堆heap 和栈stack中来加以区分。其中， 堆里存放着一些对象。而栈中则存放这一些基础型变量以及对象指针。

当调用一个方法时， JS会生成一个与这个方法对应的执行环境context,又叫执行上下文。 这个执行环境中有这个方法的私有作用域， 上层作用域的指向， 方法的参数， 这个作用域中定义的变量以及这个作用域的this对象。 而依次调用的时候， 因为JS是单线程的， 同一时间只能执行一个方法， 于是这些方法被排队在一个单独的地方。 这个地方被称为执行栈。

当一个脚本第一次执行的时候， JS引擎会解析这段代码， 并将其中的同步代码按照执行顺序加入执行栈中， 然后从头开始执行。如果当前执行的是一个方法。 当这个执行环境中的代码执行完毕并返回结果后， js会退出这个执行环境并把这个执行环境销毁， 回到上一个方法的执行环境。 ......这个过程反复进行， 直到执行栈中的代码全部执行完毕。

global初次运行脚本时向执行栈中加入代码：

上图：一个方法执行会向执行栈中加入这个方法的执行环境， 在这个执行环境中还可以调用其他方法， 甚至是自己， 其结果不过是在执行栈中再添加一个执行环境。 这个过程可以是无限进行下去的，除非发生了栈溢出， 即超出了所能使用内存的最大值。

当一个异步代码（如发送ajax请求数据）执行后会如何呢？ 开头说， js的一大特点是 非阻塞， 实现这一点的关键在于一项机制——事件队列Task Queue

js引擎遇到一个异步事件后并不会一直等待其返回结果， 而是会将这个事件挂起(pending)， 继续执行执行栈中的其他任务。 当一个异步事件返回结果后， js会将这个事件加入与当前执行栈不同的另一个队列， 我们称之为。 被放入事件队列的不会立刻执行其回调。 而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时， 主线程会去查找事件队列是否有任务。 如果有， 那么主线程会取出排在第一位的事件， 并把这个事件对应的回调放入执行栈中， 然后执行其中的同步代码......, 如此反复， 这样就形成了一个无限循环。 这个过程被称之为”事件循环Event Loop“。

过程图片如下：

stack ：表示我们所说的执行栈
web apis: 代表一些异步事件
callback queue: 事件队列。

2. macro task宏任务 和 micro task微任务

以上的事件循环过程是一个宏观的表述， 实际上因为异步任务之间并不相同， 因此他们的执行优先级也有区别。 不同的异步任务分为两大类： 微任务 micro task 和 宏任务 macro task。
以下事件属于宏任务：

setInterval()
setTimeout()

以下事件属于微任务：

new Promise()
new MutaionObserver()

前面介绍了，在一个事件循环中， 异步事件返回结果后会被放到一个任务队列中。 然而，根据这个异步事件的类型， 这个事件实际上会划分到对应的宏任务队列和微任务队列中去。 并且在当前执行栈为空的时候， 主线程会查看微任务队列中是否有事件存在。 如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空。 然后去宏任务队列中取出最前面的一个事件， 把对应的回调加入当前执行栈... 反复如此， 进入循环。

例子：

setTimeout(function() {
  console.log(1);
})

new Promise(function(resolve, reject) {
  console.log(2);
  resolve(3);
}).then(function(res) => {
  console.log(res);
})

结果为： 2 3 1

注意： 当 当前执行栈执行完毕时会优先处理所有微任务任务队列中的事件， 然后再去宏任务队列中取出一个事件。 同一次事件循环中， 微任务永远在宏任务之前执行