js基础 ---- 事件循环机制

一、为什么要事件循环机制

　　我们都知道 JavaScript 是一门单线程非阻塞的脚本语言，这就意味着再任何时候 JavaScript 都只会有一个主线程来处理所有的任务

　　但是对于 JavaScript 来说单线程确实是必要的 原因之一在其最初也是最主要的执行环境——浏览器中，我们需要进行各种各样的dom操作。这样就保证了程序执行的一致性。

　　但是随着 JavaScript 的发展 现在单线程的效率实在太低 这就衍生出了异步的概念 异步的关键就是 event loop（事件循环）

二、什么是事件循环机制

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

三、什么是执行栈和事件队列

　　当 JavaScript 代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分

　　堆里存放着一些对象，栈中则存放着一些基础类型变量以及对象的指针

　　（1）、执行栈

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

　　　　执行栈的工作进程:

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

　　（2）、事件队列

　　　　     当我们发出一个ajax请求，他并不会立刻返回结果，为了防止浏览器出现假死或者空白，主线程会把这个异步任务挂起(pending)，继续执行执行栈中的其他任务，等异步任务返回结果后，js会将这                个异步任务按照执行顺序，加入到与执行栈不同的另一个队列，也就是事件队列。

四、异步任务的执行顺序

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

　　宏任务：

　　　　setInterval()　　

　　　　setTimeout()

　　微任务：

　　　　new Promise()

　　　　new MutaionObserver()

　　在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去

　　并且在当前执行栈为空的时候，主线程会 查看微任务队列是否有事件存在，

　　如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈

　　如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈...如此反复，进入循环。

 

　　注意点：

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