浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。
理解事件循环的工作方式对于代码优化很重要，有时对于正确的架构也很重要。
事件循环是什么？
我们知道虽然 JavaScript 是一门单线程语言，但通过使用 Promise 等机制，可以实现异步编程，单线程与异步编程听起来是矛盾的，哪JS是如何实现异步编程呢，答案就是事件循环。
事件循环 的概念非常简单， 件循环是 JavaScript 引擎用来处理异步任务的机制，在事件循环中，JavaScript 引擎会不断地从任务队列中取出任务，执行这些任务，并等待新的任务加入。
整体流程如下：
- 当同步代码时，引擎会顺序执行。
- 当碰到异步的代码时，引擎会将这个任务挂起，放入一个事件队列。
- 当同步代码执行完成后，主线程处于闲置状态时，主线程会去查找事件队列是否有任务，然后取出第一个任务，执行。
- 如此反复，形成事件循环。
常见的异步任务包括定时器、网络请求、事件监听器回调等。
从代码来看，js事件循环是采用类似下边这种方式来实现的：
while (queue.waitForMessage()) {
queue.processNextMessage();
}
关于宏任务、微任务
以上的事件循环过程是一个宏观的表述，实际上因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task），在同一次事件循环中，微任务永远在宏任务之前执行。
以下事件属于宏任务：
- setInterval()
- setTimeout()
以下事件属于微任务
- new Promise()
- new MutaionObserver()
浏览器中有哪几种进程？
虽然js是单线程的，但js的执行环境浏览器并不是单线程的，浏览器中存在多个进程，每个进程负责不同的任务：
- 主进程：管理浏览器的主要功能，如地址栏、书签、前进后退等。
- 渲染进程：执行 JavaScript 代码、渲染页面、管理 DOM 元素等。
- GPU 进程：处理页面的 GPU 相关操作，如绘制页面、动画效果等。
- 网络进程：处理网络请求和数据传输。
其中渲染进程是执行js代码和渲染dom元素的进程，在渲染进程中，JavaScript 代码执行会影响页面渲染和用户交互。如果一个 JavaScript 任务执行时间过长，可能会阻塞其他任务的执行，导致页面卡顿，例如无法及时响应用户事件，例如处理用户事件。所以一些框架如React Fiber 架构采用将大任务拆分为小任务，并利用时间片的方式在渲染进程中交替执行这些任务，从而提高页面的响应性和用户体验。”
参考：
原文链接：https://juejin.cn/post/7348320601999097895 作者：Nicander
