事件循环机制（Event Loop）

JS中的Event Loop

众所周知 JS 是⻔⾮阻塞单线程语⾔，因为在最初 JS 就是为了和浏览器交 互⽽诞⽣的。如果 JS 是⻔多线程的语⾔话，我们在多个线程中处理 DOM 就可能会发⽣问题（⼀个线程中新加节点，另⼀个线程中删除节点）

JS 在执⾏的过程中会产⽣执⾏环境，这些执⾏环境会被顺序的加⼊到执⾏栈中。

如果遇 到异步的代码，会被挂起并加⼊到 Task （有多种 task ） 队列中。

⼀旦执⾏栈为空， Event Loop 就会从 Task 队列中拿出需要执⾏的代码并放⼊执⾏栈中执⾏，所以本 质上来说 JS 中的异步还是同步⾏为。

栈

栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。栈是一种数据结构，它按照后进先出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据。

栈是只能在某一端插入和删除的特殊线性表。

队列

特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。

进行插入操作的端称为队尾，进行删除操作的端称为队头。 队列中没有元素时，称为空队列。

队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出（FIFO—first in first out）

console.log('script start');

setTimeout(function() {

     console.log('setTimeout'); 
    
    }, 0);


console.log('script end');


//  script start => script end  => setTimeout

不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务 （ microtask ） 和 宏任务（ macrotask ）。在 ES6 规范中， microtask 称为 jobs，macrotask 称为 task。

console.log('script start');

setTimeout(function() {

     console.log('setTimeout'); 
    
    }, 0);

new Promise((resolve) => {
 
        console.log('Promise');
 
        resolve(); 
    
     }).then(function() {
 
        console.log('promise1');
    
     }).then(function() {
 
        console.log('promise2');
     });

console.log('script end');

// script start => Promise => script end => promise1 => promise2 => setTimeout

以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于 微任务⽽ setTimeout 属于宏任务。

---

相信通过上面的例子，大家也有了自己的理解，下面给大家归纳整理一下：

微任务

• process.nextTick
• promise
• Object.observe
• MutationObserver

宏任务

• script
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

宏任务中包括了 script ，浏览器会先执⾏⼀个宏任务，接下来有异步代码 的话就先执⾏微任务

所以正确的⼀次 Event loop 顺序是这样的

• 执⾏script主体代码，这属于宏任务
• 执⾏栈为空，查询是否有微任务需要执⾏
• 执⾏所有微任务
• 必要的话渲染 UI 然后开始下⼀轮 Event loop ，重复上述过程

通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有⼤量的计算 并且需要操作 DOM 的话，为了更快的响应界⾯响应，我们可以把操作 DOM 放⼊微任务中

Node 中的 Event loop

Node 中的 Event loop 和浏览器中的不相同。

Node 的 Event loop 分为 6 个阶段（timer  I/O  idle, prepare  poll  check  close callbacks），它们会按照顺序反复运⾏。

......

感兴趣可继续深入了解