【事件循环】（渡一）

一、事件循环

浏览器有哪些进程和线程

浏览器是一个多进程多线程的应用程序，当启动浏览器后，会默认启动多个进程

可以在浏览器任务管理器中查看所有进程

其中最主要的进程有：

• 浏览器进程

  主要负责界面展示，用户交互，子进程管理，内部会启动多个线程处理不同任务

• 网络进程

  负责加载网络资源，也会启动多个线程

• 渲染进程

  渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML，CSS，JS代码

  默认情况下，浏览器会为每个标签页开启一个新的渲染线程，以保证不同的标签页之间互不影响

渲染主线程是如何工作的

渲染主线程是最繁忙的，需要它处理的任务包括但不限于：

• 解析HTML
• 解析CSS
• 计算样式
• 布局
• 处理图层
• 每秒把页面画60次
• 执行全局的js代码
• 执行事件处理函数
• 执行计时器的回调函数
• … …

渲染主线程如何调度

1. 在最开始，渲染主线程会进入一个无限循环
2. 每一次循环都会检查消息队列中是否有任务存在，如果有就取出第一个任务执行，执行完进入下一个循环。如果没有则进行休眠
3. 其他所有线程（包括其它进程中的线程）可以随时向消息队列中添加任务。新任务会加在末尾，主线程如果休眠则会唤醒

整个过程被称作事件循环（或消息循环）

若干解释

何为异步

代码在执行过程中，会遇到一些无法立即执行的任务，如

• 计时完成后需要完成的任务
• 网络通讯完成后需要执行的任务
• 用户操作后需要执行的任务

如果让主线程等待，就会导致主线程长期处于阻塞状态，导致浏览器卡死

同步示意图：

异步示意图：

js为何阻碍渲染

js的执行和渲染在一个线程中执行

任务有优先级吗

没有优先级，在消息队列中先进先出

消息队列是有优先级的，可以有多个消息队列（延时队列，微队列，交互队列等）

• 每个任务都有一个任务类型，每个类型的任务必须在同一个队列，不同类型的任务可以分属于不同的队列，再一次事件循环中，浏览器可以根据实际情况从不同队列取任务
• 浏览器不许准备好一个微队列，微队列中的任务优先于其他任务执行

二、浏览器的渲染原理

渲染时间点

渲染流水线

1、解析html

将html解析dom树

将css解析css树，css对象模型

解析遇到CSS代码如何处理

为了提高效率，浏览器会启动一个预解析器率先下载和解析CSS

遇到js代码如何处理

渲染主线程遇到js必须暂停一切行为，等待下载执行完成后才能继续，预解析线程可以分担一点下载js的任务

2、样式计算

最终生成计算后的样式

3、布局

4、分层

5、绘制

6、分块

7、光栅化

8、画