Written on July 06, 2023
一、进程
谈到事件循环，不得不提到一个概念，那就是进程。在我们的电脑或其他设备里，每一个程序或应用要运行都是需要有一个进程来支持的。
实际上进程就是给每个应用分配了一个内存空间，每个应用都至少有一个进程。
每个进程都是相互独立，并且呈隔离的关系，进程之间可以相互通信，但必须双方同意。
二、线程
有了进程以后，还需要有运行代码的“人”，线程就是用来运行代码的，每个进程内也至少有一个线程。
进程在开启以后会自动创建一个线程去运行代码，这个线程称之为主线程，主线程一旦结束，整个进程也就结束。
如果要执行多块代码，主线程就会开启更多的线程，所以一个进程中也会同时有多个线程存在。
三、浏览器中的进程和线程
浏览器是一个多进程和多线程的应用程序，它的架构设计是为了提供更好的性能和用户体验。
1. 浏览器进程
浏览器启动时，会创建一个浏览器进程。这个进程负责管理整个浏览器的工作，包括用户界面、地址栏、书签等。它还负责创建和管理其他进程，如渲染进程、插件进程、网络进程等。
2. 渲染进程
每个标签页都会有一个独立的渲染进程。渲染进程负责解析和渲染网页内容，将 HTML、CSS 和 JavaScript 转换为可视化的页面。每个渲染进程都有自己的渲染引擎，如 Blink 引擎（Chrome 浏览器）或 Gecko 引擎（Firefox 浏览器）。
3. 插件进程
如果网页中使用了插件（如 Flash、Java 等），浏览器会为每个插件创建一个独立的插件进程。这样可以保证插件的运行不会影响到其他页面的渲染和响应。
4. GPU 进程
GPU 进程负责处理浏览器中的图形操作，如绘制页面、执行动画等。它与渲染进程进行通信，将渲染结果传递给 GPU 进程进行处理。
5. 网络进程
网络进程负责处理网络请求和响应。它与渲染进程进行通信，将请求的数据传递给渲染进程，并将响应的数据返回给渲染进程进行处理。
6. 其他进程
除了上述提到的进程，浏览器还可能有其他的进程，如扩展进程、任务调度进程等，这些进程都有各自的功能和职责。
7. 线程
在每个进程中，除了主线程外，还会有其他线程存在。主线程负责处理用户交互、执行 JavaScript 代码等任务。除了主线程外，还有一些后台线程，如网络线程、定时器线程等，它们负责处理一些耗时的操作，以保证主线程的流畅运行。
四、宏任务和微任务
在 JavaScript 中，任务分为宏任务（macrotask）和微任务（microtask）。
1. 宏任务
宏任务是由浏览器发起的任务，如 DOM 事件、定时器事件、网络请求等。宏任务会被添加到任务队列中，等待主线程执行。 例如：
setTimeout(() => {
console.log('setTimeout');
}, 0);
console.log('sync');
js上面的代码中，setTimeout 是一个宏任务，会被添加到任务队列中，等待主线程执行。console.log('sync') 是同步任务，会立即执行。
2. 微任务
微任务是由 JavaScript 引擎发起的任务，如 Promise、MutationObserver 等。微任务会被添加到微任务队列中，等待主线程执行完当前任务后执行。 例如：
Promise.resolve().then(() => {
console.log('promise');
});
console.log('sync');
js上面的代码中，Promise.resolve().then() 是一个微任务，会被添加到微任务队列中，等待主线程执行完当前任务后执行。console.log('sync') 是同步任务，会立即执行。
五、Event Loop
Event Loop（事件循环）是 JavaScript 运行时的一种机制，用于处理任务队列中的任务。它负责维护任务队列，执行任务队列中的任务，并处理微任务队列中的微任务。
1. 任务队列
任务队列是一个先进先出（FIFO）的队列，用于存储宏任务。当一个宏任务执行完毕后，会检查微任务队列中是否有微任务，如果有则依次执行微任务，然后再执行下一个宏任务。
2. 微任务队列
微任务队列是一个先进先出（FIFO）的队列，用于存储微任务。当一个宏任务执行完毕后，会依次执行微任务队列中的微任务，直到微任务队列为空。
3. Event Loop 运行机制
Event Loop 的运行机制如下：
- 执行同步任务，直到遇到第一个宏任务。
- 执行宏任务，执行完毕后检查微任务队列。
- 执行微任务队列中的微任务，直到微任务队列为空。
- 执行下一个宏任务，重复上述步骤。
六、图解
