事件循环机制

事件循环

event-loop
又叫做消息循环(message-loop)
1.浏览器渲染主线程的工作方式
2.在chrome源码中，他会开启一个无限循环，每次循环从消息队列中取出第一个任务执行，其他线程只需要在合适的时候将任务添加到消息队列末尾。
3.过去只是将消息队列分为：微任务队列和宏任务队列，但现在已经满足不了复杂的浏览器环境，取而代之的是一种更加灵活多变的方式。
4.根据W3C官方解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同类型的任务可以在不同的队列；不同的任务队列有不同的优先级，在一次事件循环中，由浏览器决定执行哪个队列的任务
（微队列 > 交互队列 > 延时队列）
想要深入理解事件循环必须先了解浏览器的进程模型

浏览器进程模型

Browser Process Model
进程（process）：程序运行需要的一定的内存空间（简单理解）
线程（thread）：运行程序的代码

浏览器

一款多进程、多线程的程序，随着技术发展，现代的浏览器复杂程度与操作系统不相上下，内部工作及其复杂，所以在启动浏览器后，他会自动开启多个进程来处理工作，各个进程之间相互隔离，避免一个进程崩坏影响其他进程
进程之间相互隔离，但可以通信，只要双方都同意即可

浏览器进程

浏览器自动开启的主要进程：浏览器进程、网络进程、渲染进程

google的进程管理可以在google的任务管理工具中查看
关于渲染进程是主要讲的，一个tab页一个渲染进程（可能有所改变）
chrome’s docs

大致意思就是未来会使用一个站点一个进程（全站隔离），而不是一个tab页一个进程，降低内存使用，提高安全保障

进程与线程的关系

1. 进程是线程的容器（类比于：工厂&工人）
2. 一个进程开始会自动创建一个主线程，主线程结束，整个程序结束

渲染主线程任务

1. 解析HTML
2. 解析CSS
3. 计算样式
4. 布局
5. 处理图层
6. 每秒画60次页面
7. 执行js
8. 执行事件处理函数（用户交互）
9. 执行计时器的回调函数
10. …

为什么渲染进程不开启多个线程来处理任务？
出于性能和安全方面的考虑
1.多线程会增加切换上下文的开销，而线程之间的同步和通信也会带来开销，从而降低浏览器的运行效率
2.多线程还会有一些并发问题，如死锁、竞态条件…
3.安全方面，不同线程之间共享进程资源时，会出现数据竞争和隐私泄露等问题
因此，为了保证浏览器的高效性和安全性，现代浏览器通常使用单线程模型来处理渲染进程中的任务
同时也可以通过异步编程等方式提高任务处理的效率

接回事件循环

那么一个主线程如何处理这么多任务呢？
排队（queue）

最开始的时候渲染主线程会进入一个无限循环，

每次循环从队列中取出一个任务执行，执行完再从队列中取任务，如果队列中没有任务，主线程会进入休眠状态，等待被任务唤醒
其他线程（包括其他进程的线程）可以向队列中添加任务，新任务被添加到队列末尾（FIFO），如果主线程处于休眠状态，向队列中添加任务会唤醒主线程，进而循环从队列中拿取任务
这整个过程被称为消息/事件循环