事件循环

浏览器

事件循环

1. 浏览器的进程模型

1.1 何为进程？

  程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

image-20220809205743532

  每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

1.2 何为线程？

  有了进程后，就可以运行程序的代码了。

  运行代码的「人」称之为「线程」。

  一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

  如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

image-20220809210859457

1.3 浏览器进程和线程

  浏览器是一个（多进程多线程）的应用程序

  浏览器内部工作极其复杂。

  为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

image-20220809213152371

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

其中，最主要的进程有：

  1. 浏览器进程

      主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

  2. 网络进程

      负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

  3. 渲染进程（重点理解）

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

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

    将来该默认模式可能会有所改变，有兴趣可参见chrome官方说明文档

2. 渲染主线程工作原理

2.1 处理任务

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

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

2.2 思考

思考题：为什么渲染进程不适用多个线程来处理这些事情？

  渲染进程（rendering process）通常会使用多个线程来处理渲染相关的任务。这是因为在现代计算机中，CPU的处理能力已经越来越强大，可以支持同时处理多个任务。同时，渲染通常是一个需要耗费大量计算资源的任务，因此使用多线程能够更加充分地利用计算资源，提高渲染效率和速度。

  1. 多线程可能会导致竞争条件和死锁等问题，而浏览器渲染进程需要对多个页面进行渲染和处理，这可能会导致复杂的线程交互和同步问题。
  2. 多线程可能会导致性能问题，线程切换和同步操作可能会增加处理时间，而且线程越多，问题越复杂，可能会降低整体性能。
  3. 浏览器渲染进程的工作一般是单个线程执行的，因此多线程实现可能需要大量的代码重构和调试，这可能会影响开发效率和代码质量。
  4. 多线程实现会增加程序的复杂度和维护成本，需要更多的开发和测试资源，而且可能需要更多的硬件资源来支持多个线程的执行。
  5. 另外，渲染进程通常是运行在浏览器的沙箱环境中，具有一定的安全性限制。多线程可能会影响沙箱环境的安全性，增加攻击面，因此需要谨慎考虑。
  6. 对于单个页面，浏览器渲染进程已经实现了异步处理和多进程协作等技术，可以有效地提高渲染效率和响应速度，因此多线程并不是必要的。

  综上所述，虽然渲染进程使用多线程可以提高渲染效率和速度，但是需要特别注意并发问题和安全性限制，避免带来更多问题。

  通俗来说：

  假设你是一名厨师，你需要烹饪多道菜品，每道菜品需要不同的材料和工具。如果你只有一个锅和一个灶台，你需要按照一定的顺序烹饪每道菜品，这就像是单线程处理任务一样。如果你同时使用多个锅和灶台来烹饪不同的菜品，这就像是多线程处理任务一样。

  但是，如果你同时使用多个锅和灶台，你需要同时注意每道菜品的烹饪进度，需要协调使用多个工具和材料，这可能会导致混乱和错误。而且，如果你的工作空间有限，多个锅和灶台可能无法同时使用，这会导致资源浪费和效率降低。

  类比到浏览器渲染进程，多线程可能会导致类似的问题，而单线程处理任务已经可以有效地提高渲染效率和响应速度。因此，在浏览器渲染进程中，多线程并不是必要的。

2.3 调度任务

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

  • 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
  • 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
  • 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
  • …

  渲染主线程想出了一个绝妙的主意来处理这个问题：排队

image-20220809223027806

  1. 在最开始的时候，渲染主线程会进入一个无限循环

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

    如果没有，则进入休眠状态。

  3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。

  4. 在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

  5. 先执行主线程里的所有任务，如果主线程没有任务，才去消息队列获取任务，先主线后消息

      这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

  整个过程，被称之为事件循环（消息循环）

3. 辅助理解

3.1 何为异步？

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

  • 计时完成后需要执行的任务 —— setTimeout、setInterval
  • 网络通信完成后需要执行的任务 – XHR、Fetch
  • 用户操作后需要执行的任务 – addEventListener

  如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

image-20220810104344296

  渲染主线程承担着极其重要的工作，无论如何都不能阻塞！

  因此，浏览器选择异步来解决这个问题

image-20220810104858857

使用异步的方式，渲染主线程永不阻塞

面试题：如何理解 JS 的异步？

  参考答案：

  JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

  而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

  如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

  所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

  在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

3.2 JS为何会阻碍渲染？

  先看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h1>ohhhhhh！</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '哈哈哈哈';
    delay(3000);
  };
    //点击按钮后，会发生什么呢？
	//3秒以后h1的文本值为哈哈哈哈
</script>

  JS为何会阻碍渲染原因如下：

  当渲染主线程执行全局JS任务时，异步任务会进入交互线程，里面的任务本身会衍生出派生任务到消息队列里面排队，然后渲染主线程执行任务完成时，又去从消息队列里取任务执行，如果被排队了，就会排在后面执行，进而阻碍渲染。

  以上代码当执行了点击任务后，点击任务进入交互主线程，然后执行h1.textContent = '哈哈哈哈'，这时候就会衍生出绘制任务到消息队列里排队，可是后面要执行delay(3000)3秒延时函数，所以只有当3秒过后，才会排队到h1.textContent = '哈哈哈哈，就是这派生出的绘制任务和三秒函数阻碍了浏览器渲染。

image-20230331134322042

  所以当我们开发者书写业务代码时需要清楚浏览器的事件循环和JS执行机制，这样才能配合开发。

3.3 任务有优先级吗？

  1. 任务没有优先级，在消息队列中先进先出（排队）

  2. 消息队列是有优先级的

  3. 根据 W3C 的最新解释:

  • 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
    在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
  • 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
    https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

  1. 在目前 chrome 的实现中，至少包含了下面的队列：
  • 微队列：用户存放需要最快执行的任务，优先级「最高」
  • 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
  • 延时队列：用于存放计时器到达后的回调任务，优先级「中」

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

例如：

1
2
>// 立即把一个函数添加到微队列
Promise.resolve().then(函数)

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

image-20230331135717081

看代码

1
2
3
4
5
6
7
8
9
10
11
12
setTimeout(function () {
  console.log(1);
}, 0);

function delay(duration) {
  var start = Date.now();
  while (Date.now() - start < duration) {}
}
delay(3000);
console.log(2);

//三秒后输出21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a() {
  console.log(1);
  Promise.resolve().then(function () {
    console.log(2);
  });
}
setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(a);

console.log(5);

//5123
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="begin">开始</button>
    <button id="interaction">添加交互任务</button>
    <script>
      // 死循环指定的时间
      function delay(duration) {
        var start = Date.now();
        while (Date.now() - start < duration) {}
      }

      function addDelay() {
        console.log('添加延时队列');
        setTimeout(() => {
          console.log('延时队列执行');
        }, 100);
        delay(2000);
      }

      function addInteraction() {
        console.log('添加交互队列');
        interaction.onclick = function () {
          console.log('交互队列执行');
        };
        delay(2000);
      }

      begin.onclick = function () {
        addDelay();
        addInteraction();
        console.log('===========');
      };

      // 添加延时队列
      // 添加交互队列
      // ===========
      // 交互队列执行(取决于interaction点击与否,是)
      // 延时队列执行

      // 添加延时队列
      // 添加交互队列
      // ===========
      // 延时队列执行
      // 交互队列执行(取决于interaction点击与否，否，不输出)
    </script>
  </body>
</html>

3.4 思考

面试题1：阐述一下 JS 的事件循环

  参考答案：

  事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

  在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

  过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

  根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题2：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为（偏差事件）：

  1. 计算机硬件没有原子钟，无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
  3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
  4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

4. JS执行机制

参考阅读：JS执行机制

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~