谈一谈对事件循环的理解

事件循环⼜叫做消息循环，是浏览器渲染主线程的⼯作⽅式。特别是在JavaScript和Node.js等异步编程环境中，也是核心概念之一。它的主要作用是管理异步操作，确保代码的执行顺序和效率。

并且这个话题很有可能是一个面试题。我先把参考答案放下面

拿谷歌浏览器举例，它开启⼀个不会结束的 for 循环，每次循环从消息队列中取出第⼀个任务执⾏，⽽其他线程只需要在合适的时候将任务加⼊到队列末尾即可。过去把消息队列简单分为宏队列和微队列，这种说法⽬前已⽆法满⾜复杂的浏览器环境，取⽽代之的是⼀种更加灵活多变的处理⽅式。根据 W3C 官⽅的解释，每个任务有不同的类型，同类型的任务必须在同⼀个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在⼀次事件循环中，由浏览器⾃⾏决定取哪⼀个队列的任务。但浏览器必须有⼀个微队列，微队列的任务⼀定具有最⾼的优先级，必须优先调度执⾏。

在⽬前 chrome 的实现中，⾄少包含了下⾯的队列：

延时队列：⽤于存放计时器到达后的回调任务，优先级「中」

交互队列：⽤于存放⽤户操作后产⽣的事件处理任务，优先级「⾼」

微队列：⽤户存放需要最快执⾏的任务，优先级「最⾼」

上面提到了消息循环，我这里解释一下，也是对参考答案的展开。

这是我们浏览器要干的事情，我这里是简易版的，现实中浏览器比这复杂的多的多，开发一个浏览器的成本不亚于开发一个操作系统了。

在最开始的时候，渲染主线程会进⼊⼀个⽆限循环
每⼀次循环会检查消息队列中是否有任务存在。如果有，就取出第⼀个任务执⾏，执⾏完⼀个后进⼊下⼀次循环；如果没有，则进⼊休眠状态。
其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务这样⼀来，就可以让每个任务有条不紊的、持续的进⾏下去了。

上述的整个过程，被称之为事件循环（消息循环）

1. 事件循环的基本概念

事件循环（Event Loop）是一个机制，它允许程序在等待某些操作（如I/O操作）完成的同时，继续执行其他代码。它的工作流程可以简单描述为：

执行栈（Call Stack）：用于存放当前正在执行的函数。每当一个函数被调用时，它会被推入栈中，执行完成后会从栈中弹出。
任务队列（Task Queue）：存放异步操作的回调函数。当某个异步操作完成时，它的回调函数会被放入任务队列中，等待事件循环的处理。
事件循环（Event Loop）：不断检查执行栈是否为空，如果为空，则从任务队列中取出一个任务并将其推入执行栈中执行。

2.事件循环的工作流程

执行栈：当JavaScript代码开始执行时，所有的同步代码会被推入执行栈中，逐行执行。
异步操作：当遇到异步操作（如setTimeout、Promise等）时，这些操作会被发送到Web API（浏览器环境）或Node.js的异步处理模块中。
回调函数：一旦异步操作完成，相关的回调函数会被放入任务队列中。
事件循环：事件循环会不断检查执行栈是否为空。如果执行栈为空，它会从任务队列中取出一个任务并将其推入执行栈中执行。
重复：这个过程会不断循环，直到所有的任务都被处理完。

3. 组成部分

宏任务（Macro Task）：包括整体代码、setTimeout、setInterval等。每次事件循环会处理一个宏任务。
微任务（Micro Task）：包括Promise的.then()、process.nextTick()等。微任务的优先级高于宏任务，事件循环会在处理完当前宏任务后，立即处理所有的微任务

4. 实际应用中的重要性

事件循环的设计使得JavaScript能够在单线程环境中高效地处理异步操作。

用户交互：在用户与页面交互时，事件循环确保了UI的响应性，避免了因为长时间的计算而导致的页面卡顿。
网络请求：在进行网络请求时，事件循环允许程序在等待响应的同时继续执行其他代码，提高了资源的利用率

5. 示例代码

console.log('Start');setTimeout(() => {console.log('Timeout 1');
}, 0);Promise.resolve().then(() => {console.log('Promise 1');
});setTimeout(() => {console.log('Timeout 2');
}, 0);Promise.resolve().then(() => {console.log('Promise 2');
});console.log('End');

输出顺序：