主线程和事件循环是怎么运作的？

在浏览器运行期间，我们常常听说"主线程"和"事件循环"这两个概念，它们是浏览器执行JavaScript代码的关键机制。为了更好地理解它们的工作原理，我们可以把浏览器想象成一个舞台，主线程是舞台中央的演员，而事件循环就像是一个幕后导演，负责管理演员的出场顺序。

主线程

主线程是浏览器的核心，负责执行所有与用户交互相关的任务，包括处理用户输入、更新用户界面、执行脚本代码等。它是一个单线程，这意味着它一次只能做一件事。当主线程正在执行某个任务时，其他任务必须等待。

事件循环

事件循环是浏览器用来管理主线程任务的机制。它是一个无限循环，不断地从任务队列中取出任务并交由主线程执行。任务队列是一个先进先出的队列，这意味着最早进入队列的任务将首先被执行。

事件循环的工作原理可以分为以下几个步骤：

1. 主线程执行完当前任务后，会检查任务队列中是否有任务。
2. 如果有任务，则主线程会执行队列中的所有任务，直到队列为空。
3. 如果任务队列为空，则主线程会检查是否有新的任务被添加到队列中。
4. 如果有新的任务，则主线程会执行队列中的所有任务，直到队列再次为空。

这个过程不断重复，直到所有任务都完成。

任务队列

任务队列分为两类：宏任务队列和微任务队列。

• 宏任务队列 ：也称为主任务队列，存储着需要主线程执行的任务。这些任务包括脚本代码、setTimeout()函数、setInterval()函数等。
• 微任务队列 ：存储着需要在当前任务执行完毕后立即执行的任务。这些任务包括Promise.then()函数、MutationObserver()函数等。

事件循环与任务队列的运作示例

以下是一个简单的例子，展示了事件循环是如何与任务队列一起工作的：

1. 用户点击按钮。
2. 浏览器将"点击"事件添加到宏任务队列。
3. 主线程继续执行其他任务。
4. 主线程执行完所有任务后，检查任务队列中是否有任务。
5. 主线程发现宏任务队列中有"点击"事件，于是执行该事件。
6. "点击"事件处理程序执行完毕后，主线程检查微任务队列中是否有任务。
7. 主线程发现微任务队列中没有任务，于是继续执行其他任务。

这个例子展示了事件循环是如何管理主线程任务的。事件循环不断地从任务队列中取出任务并交由主线程执行，确保浏览器能够流畅地运行。

总结

主线程和事件循环是浏览器执行JavaScript代码的关键机制。主线程负责执行所有与用户交互相关的任务，而事件循环负责管理主线程任务的执行顺序。任务队列分为宏任务队列和微任务队列，其中宏任务队列存储着需要主线程执行的任务，微任务队列存储着需要在当前任务执行完毕后立即执行的任务。事件循环不断地从任务队列中取出任务并交由主线程执行，确保浏览器能够流畅地运行。