浏览器事件循环浅析

1. 浏览器进程模型

1. 进程： 程序运行时，需要一块专门的内存空间，用来存放程序代码、运行中的数据等。这块内存空间就可以简单理解为进程。每一个进程一般来说是相对独立的，互不影响。但可以通过进程间通信，实现数据共享。
2. 线程： 进程中执行任务的单元，一个进程至少包含一个线程。线程是进程的一部分，一个进程中的多个线程可以共享进程中的数据。因此在每一个进程启动时，都会默认开启一个线程，这个线程称为主线程。在主线程的任务过多时，可以通过创建子线程的方式，来执行任务。用来减轻主线程的负担。

1. 浏览器的线程和进程

浏览器是一个多进程多线程的软件，浏览器进程模型如下：

1. 浏览器进程： 负责浏览器的界面展示，用户交互，子进程管理，浏览器内核的初始化等。包括所有的外部设备的访问和文件操作等。

2. 网络进程： 负责加载网络资源，网络请求等。

3. 渲染进程： 负责页面的渲染，脚本的执行等。渲染进程启动之后会默认开启一个主线程，成为渲染主线程。并且浏览器会为每一个标签页开启一个新的渲染进程，以保证标签页内的数据是隔离的。

2.渲染主线程

渲染主线程是浏览器渲染进程的核心线程，负责执行任务队列中的任务。渲染主线程的任务包括：

1. 解析HTML，构建DOM树
2. 解析CSS，构建CSSOM树
3. 样式计算
4. 布局
5. 绘制
6. JavaScript的执行
7. 事件处理
8. 异步任务的调度

拓展: 浏览器得渲染进程为什么不同时开启多个线程进行渲染？

1. 浏览器的渲染主线程会在开始时进入无限循环
2. 每一次循环称为一次事件循环，在这个过程中会检查消息队列是否有任务存在，如果有任务则执行任务，如果没有任务则等待消息。
3. 其他所有的线程（包括其他进程的线程）可以随时将任务插入消息队列中，当主线程空闲时，会从消息队列中取出一个任务执行。在添加时如果渲染主线程处于休眠状态，则会将主线程唤醒，执行任务。

3. 异步

在js中存在一部分无法立即处理的任务，比如网络请求，定时器，dom事件监听等等。如果渲染主线程等待这些任务的执行，则会使得主线程长期处于阻塞状态，从而导致浏览器卡死。因此，浏览器将无法立即处理的任务放入任务队列中，等待主线程空闲时执行。

所以浏览器采用了异步的方式，将无法立即处理的一些代码包装成任务，放入任务队列中等待主线程空闲时执行。

4. 任务队列

任务队列是异步任务的集合，浏览器会将无法立即处理的任务放入任务队列中等待主线程空闲时执行。
W3C规范中定义：

1. 每个任务都必须要有一个任务类型，且同一个类型的任务必须在同一个队列中，不同的类型的任务可以分属于不同的队列。
2. 浏览器必须存在一个微队列，微队列优先于起他所有的队列先执行。（包括浏览器的渲染绘制都必须等微队列清空）

任务队列分类：

任务队列	优先级	任务举例
延时队列	优先级中	定时器任务
交互队列	优先级高	dom事件
微队列	优先级最高	promise

2. 事件循环（event loop）

事件循环是浏览器渲染进程的核心概念之一，是浏览器渲染进程中异步任务执行的一个机制。

1. 事件循环的执行过程

1. 执行当前脚本： 执行主线程上的同步代码
2. 执行微队列的任务
3. 执行交互队列的任务
4. 执行延时队列的任务
5. 进入下一轮循环