关于JS事件循环的理解

通过对浏览器进程 线程的理解，了解JS的任务调度方式。

---

首先了解浏览器主要进程：

 1.浏览器进程：

        负责主界面显示（浏览器的控件），用户交互（监听用户的操作 例如：点击事件），开启多线程处理各种任务。

 2.网络进程

        加载网络资源（网络请求数据 AJAX等）

3.渲染页面进程

•  开启渲染主线程
• 解析HTML CSS JS代码
• 计算样式
• 布局
• 处理图层
• 执行JS代码
• 事件处理函数
• 定时器回调
• ...

        这里可以理解为：每当你打开一个网站都会开启一个新的渲染页面进程，该进程解析访问网站的HTML（通过网络请求获取），渲染出页面。

事件循环：    

JS是一门单线程语言。它通过队列来实现任务调度。

1. 在最开始的时候，渲染主线程开启一个无限循环，依次执行队列中的任务。

2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。

3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。

---

如果是遇到需要立即处理的任务，例如：

• 计时完成后需要执行的任务 setTimeout、setInterval

• 网络通信完成后需要执行的任务

• 用户操作后需要执行的任务 addEventListener

又是如何执行的呢？

这里浏览器会使用异步，开启其他线程来处理。

主线程将任务交给其他线程去处理，并自身立即结束任务的执行，转而执行后续代码。

其他线程处理完任务后，将回调函数加入到主线程的消息队列的队尾，等待主线程执行。

会开启例如：

• 定时器线程===处理定时器的任务
• 网络线程===处理网络请求的任务
• 事件监听===监听事件的任务
• 等......

例如：

计时器计时开始时：通知计时线程开始计时，计时结束后，将回调函数放入主线程执行队列，等待调度。

关于任务优先级：

任务没有优先级，但是队列有优先级。

• 每个任务都有任务类型，相同任务类型的任务必须在同一个队列中（也就是同一个处理线程）。

        比如说：

        定时器任务的类型：定时器类型

        因此定时器任务都必须放在定时器队列（定时器线程）中处理。

• 浏览器必须提供一个微队列，在微队列里的任务优先级高于其他队列。

在目前 chrome 的实现中，至少包含了下面的队列：

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

• 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」

• 微队列：用户存放需要最快执行的任务，优先级「最高」

当每一个队列都有任务时，会将优先级高的任务先执行。

 执行顺序是 任务1 任务C 任务B 任务A。