浏览器原理 14 # 消息队列和事件循环

说明

浏览器工作原理与实践专栏学习笔记

概念

下面介绍来自百科

进程

进程（Process 一段程序的执行过程）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。在早期面向进程设计的计算机结构中，进程是程序的基本执行实体；在当代面向线程设计的计算机结构中，进程是线程的容器。程序是指令、数据及其组织形式的描述，进程是程序的实体。

线程

线程（英语：thread）是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程并行执行不同的任务。在 Unix System V 及 SunOS 中也被称为轻量进程（lightweight processes），但轻量进程更多指内核线程（kernel thread），而把用户线程（user thread）称为线程。

一个进程可以有很多线程，每条线程并行执行不同的任务。

第一版：线程一次执行

使用单线程处理安排好的任务

例子：

void MainThread(){
   int num1 = 1+2; //任务1
   int num2 = 20/5; //任务2
   int num3 = 7*8; //任务3
   print("最终计算的值为:%d,%d,%d",num1,num2,num3)； //任务4
}

按照顺序在线程中依次被执行；等所有任务执行完成之后，线程会自动退出。

第二版：在线程中引入事件循环

在线程运行过程中处理新任务，所有的任务都是来自于线程内部的

要想在线程运行过程中，能接收并执行新的任务，就需要采用事件循环机制。

通过一个 for 循环语句来监听是否有新的任务：可以在线程运行过程中，等待用户输入的数字，等待过程中线程处于暂停状态，一旦接收到用户输入的信息，那么线程会被激活，然后执行相加运算，最后输出结果。

//GetInput
//等待用户从键盘输入一个数字，并返回该输入的数字
int GetInput(){
    int input_number = 0;
    cout<<"请输入一个数:";
    cin>>input_number;
    return input_number;
}

//主线程(Main Thread)
void MainThread(){
    for(;;){
        intfirst_num = GetInput()；
        int second_num = GetInput()；
        result_num = first_num + second_num;
        print("最终计算的值为:%d",result_num)；
    }
}

在第一版的线程上做了两点改进：

1. 引入了循环机制
2. 引入了事件

第三版：线程模型：队列 + 循环

处理其他线程发送过来的任务

其他线程是如何发送消息给渲染主线程？

一个通用模式是使用消息队列。

消息队列是一种数据结构，可以存放要执行的任务。它符合队列“先进先出”的特点，也就是说要添加任务的话，添加到队列的尾部；要取出任务的话，从队列头部去取。

改造方案：

1. 添加一个消息队列；
2. IO 线程中产生的新任务添加进消息队列尾部；
3. 渲染主线程会循环地从消息队列头部中读取任务，执行任务。

1、构造一个队列

class TaskQueue{
  public:
  Task takeTask(); //取出队列头部的一个任务
  void pushTask(Task task); //添加一个任务到队列尾部
};

2、改造主线程，让主线程从队列中读取任务

TaskQueue task_queue；
void ProcessTask();
void MainThread(){
  for(;;){
    Task task = task_queue.takeTask();
    ProcessTask(task);
  }
}

3、发送任务让主线程去执行

Task clickTask;
task_queue.pushTask(clickTask)

跨进程发送消息

处理其他进程发送过来的任务

如何处理其他进程发送过来的任务？

渲染进程专门有一个 IO 线程用来接收其他进程传进来的消息，接收到消息之后，会将这些消息组装成任务发送给渲染主线程，后续跟处理其他线程发送过来的任务一样。

消息队列中的任务类型

参考资料：​​【Chromium 的官方源码】​​

内部消息类型：

1. 输入事件（鼠标滚动、点击、移动）
2. 微任务
3. 文件读写
4. WebSocket
5. JavaScript 定时器等等

与页面相关的事件：

1. JavaScript 执行
2. 解析 DOM
3. 样式计算
4. 布局计算
5. CSS 动画等

如何保证页面主线程安全退出

Chrome 是这样解决的，确定要退出当前页面时，页面主线程会设置一个退出标志的变量，在每次执行完一个任务时，判断是否有设置退出标志。

TaskQueue task_queue；
void ProcessTask();
bool keep_running = true;
void MainThread(){
  for(;;){
    Task task = task_queue.takeTask();
    ProcessTask(task);
    if(!keep_running) //如果设置了退出标志，那么直接退出线程循环
        break; 
  }
}

页面使用单线程的问题

第一个：如何处理高优先级的任务

一个典型的场景

监控 DOM 节点的变化情况（节点的插入、修改、删除等动态变化），然后根据这些变化来处理相应的业务逻辑。如果 DOM 发生变化，采用同步通知的方式，会影响当前任务的执行效率；如果采用异步方式，又会影响到监控的实时性。

消息队列机制并不是太灵活，为了适应效率和实时性，此时微任务就应用而生。通常把消息队列中的任务称为宏任务。每个宏任务中都包含了一个微任务队列。

微任务是如何解决执行效率的问题？

在执行宏任务的过程中，如果 DOM 有变化，那么就会将该变化添加到微任务列表中，这样就不会影响到宏任务的继续执行。

微任务是如何解决实时性的问题？

等宏任务中的主要功能都直接完成之后，渲染引擎并不着急去执行下一个宏任务，而是执行当前宏任务中的微任务。

第二个：如何解决单个任务执行时长过久的问题

单个任务执行时间过久：

JavaScript 可以通过回调功能来规避这种问题，也就是让要执行的 JavaScript 任务滞后执行。