消息队列和事件循环：页面是怎么活起来的|浏览器篇

前面我们讲到了每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。

在写这篇文章之前，我翻阅了大量的资料，却发现没有一篇文章能把消息循环系统给讲清楚的，所以我决定用一篇文章来专门介绍页面的事件循环系统。事件循环非常底层且非常重要，学会它能让你理解页面到底是如何运行的， 所以在本篇文章中，我们会将页面的事件循环给梳理清楚、讲透彻。

为了能让你更加深刻地理解事件循环机制，我们就从最简单的场景来分析，然后带你一步步了解浏览器页面主线程是如何运作的。

需要说明的是，文章中的代码我会采用 C++ 来示范。如果你不熟悉 C++，也没有关系，这里并没有涉及到任何复杂的知识点，只要你了解 JavaScript 或 Python，你就会看懂

我们先从最简单的场景讲起，比如有如下一系列的任务：

• 任务 1：1+2
• 任务 2：20/5
• 任务 3：7*8
• 任务 4：打印出任务 1、任务 2、任务 3 的运算结果

现在要在一个线程中去执行这些任务，通常我们会这样编写代码

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

在上面的执行代码中，我们把所有任务代码按照顺序写进主线程里，等线程执行时，这些任务会按照顺序在线程中依次被执行；等所有任务执行完成之后，线程会自动退出。可以参考下图来直观地理解下其执行过程：

原理拆解： 这种模型属于静态编排：任务集合和依赖关系在主线程启动前已经确定，所以源码中的语句顺序可以直接充当调度顺序。线程维护一个调用栈，同一时刻只执行栈顶对应的工作；前三个表达式依次求值并保存结果，打印语句必须等这些赋值完成后才能读取数据。入口函数返回且调用栈清空后，若没有事件循环或其他常驻机制，线程的工作便结束。

具体实现： 用 JavaScript 表达同一过程时，可以依次计算 1 + 2、20 / 5 和 7 * 8，再把三个结果传给 console.log。预期输出为 3 4 56，并且打印不可能插入到任一同步表达式的求值过程中。这里的数据依赖也约束了次序：如果第四项读取前三项的变量，就必须放在赋值之后，否则可能遇到未初始化错误或读到不符合预期的旧值。

边界与反例： 静态顺序只适合已知、短小且能够直接执行的任务。用户输入、网络响应和定时器回调到达时间不确定，无法在启动时全部写成一段固定任务序列；若主线程用耗时循环等待它们，还会阻塞后续工作。即使任务已知，长时间计算也会独占线程，顺序正确并不等于响应及时。

工程验证： 可在每项任务前后调用 console.timeStamp，或用浏览器开发者工具的 Performance 面板录制执行过程。应观察到这些同步计算位于同一个主线程任务内且连续发生，没有其他主线程任务穿插。若时间线上出现长任务，说明应拆分计算或转移工作，而不是改变几条同步语句的排列。