JavaScript中的Event loop 事件循环机制

浏览器环境下js引擎的事件循环机制

1.执行栈与事件队列

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

我们知道当我们调用一个函数时，js会创建对应的执行上下文，这个执行上下文中存在着上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。当这一系列方法依次调用的时候，因为js是单线程的，所以同一时间只能执行一个方法，于是其余的方法被排队在一个单独的地方——执行栈

当脚本第一次执行的时候，js引擎会解析这些代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始，当js解析的是一个方法，那么js在执行栈中创建对应的执行上下文并执行其中的同步代码，当执行完毕时并返回结果时，js会退出该方法的执行上下文并销毁，并回到上一个方法的执行环境，这个过程反复进行，直到执行栈中的代码全部执行完毕。这些过程是同步代码的执行，那么当一个异步代码执行的时候呢？

js遇到异步事件的时候并不会一直等待其返回结果，而是将这个事件挂起，然后继续在执行栈中执行其他任务。当异步事件返回结果后，js会将这个事件加入与当前执行栈中不同的另一个队列，我们称之为事件队列。被放入事件队列中的事件并不会立刻执行回调，而是等执行栈中的任务全部执行完毕后，主线程闲置时，主线程会查找事件队列有没有任务，如果有，取出排在第一个的事件回调放入执行栈中，然后执行其中的同步代码，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

图中的stack表示我们所说的执行栈，web apis则是代表一些异步事件，而callback queue即事件队列。

实际上因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。

以下事件属于宏任务：

• setInterval()
• setTimeout()

以下事件属于微任务

• new Promise()
• new MutaionObserver()

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