乐趣区

关于javascript:浏览器事件循环

jiezi

残缺高频题库仓库地址：https://github.com/hzfe/awesome-interview

残缺高频题库浏览地址：https://febook.hzfe.org/

相干问题

  • 什么是浏览器事件循环
  • 浏览器为什么须要事件循环
  • Node.js 中的事件循环

答复关键点

工作队列 异步 非阻塞

浏览器须要事件循环来协调事件、用户操作、脚本执行、渲染、网络申请等。通过事件循环，浏览器能够利用 工作队列 来治理工作，让异步事件 非阻塞 地执行。每个客户端对应的事件循环是绝对独立的。

知识点深刻

1. 什么是浏览器事件循环

在计算机中，Event Loop 是一个程序结构，用于期待和发送音讯和事件。—— 维基百科

Event Loop 能够了解为一个音讯散发器，通过接管和散发不同类型的音讯，让执行程序的事件调度更加正当。

浏览器事件循环是以浏览器为宿主环境实现的事件调度，操作程序如下：

  1. 执行同步代码。
  2. 执行一个宏工作（执行栈中没有就从工作队列中获取）。
  3. 执行过程中如果遇到微工作，就将它增加到微工作的工作队列中。
  4. 宏工作执行结束后，立刻执行以后微工作队列中的所有微工作（顺次执行）。
  5. 以后宏工作执行结束，开始查看渲染，而后渲染线程接管进行渲染。
  6. 渲染结束后，JavaScript 线程持续接管，开始下一个循环。

下图展现了这个过程：

图片起源 JS CONF EU 2014

2. 浏览器为什么须要事件循环

因为 JavaScript 是单线程的，且 JavaScript 主线程和渲染线程互斥，如果异步操作（如上图提到的 WebAPIs）阻塞 JavaScript 的执行，会造成浏览器假死。而事件循环为浏览器引入了工作队列（task queue），使得异步工作能够非阻塞地进行。

浏览器事件循环在解决异步工作时不会始终期待其返回后果，而是将这个事件挂起，继续执行栈中的其余工作。当异步事件返回后果，将它放到工作队列中，被放入工作队列不会立即执行回调，而是期待以后执行栈中所有工作都执行结束，主线程处于闲暇状态，主线程会去查找工作队列中是否有工作，如果有，取出排在第一位的事件，并把这个事件对应的回调放到执行栈中，执行其中的同步代码。

3. 宏工作与微工作

异步工作被分为两类：宏工作（macrotask）与微工作（microtask），两者的执行优先级也有所区别。

宏工作次要蕴含：script（整体代码）、setTimeout、setInterval、setImmediate、I/O、UI 交互事件。

微工作次要蕴含：Promise、MutationObserver 等。

在以后执行栈为空的时候，主线程会查看微工作队列是否有事件存在。如果不存在，那么再去宏工作队列中取出一个事件并把对应的回调退出以后执行栈；如果存在，则会顺次执行队列中事件对应的回调，直到微工作队列为空，而后去宏工作队列中取出最后面的一个事件，把对应的回调退出以后执行栈。如此重复，进入循环。上面通过一个具体的例子来进行剖析：

Promise.resolve().then(() => {
  // 微工作 1
  console.log("Promise1");
  setTimeout(() => {
    // 宏工作 2
    console.log("setTimeout2");
  }, 0);
});
setTimeout(() => {
  // 宏工作 1
  console.log("setTimeout1");
  Promise.resolve().then(() => {
    // 微工作 2
    console.log("Promise2");
  });
}, 0);

最初输入程序为：Promise1 => setTimeout1 => Promise2 => setTimeout2。具体流程如下：

  1. 同步工作执行结束。微工作 1 进入微工作队列，宏工作 1 进入宏工作队列。
  2. 查看微工作队列，微工作 1 执行，打印 Promise1，生成宏工作 2，进入宏工作队列。
  3. 查看宏工作队列，宏工作 1 执行，打印 setTimeout1，生成微工作 2，进入微工作队列。
  4. 查看微工作队列，微工作 2 执行，打印 Promise2。
  5. 查看宏工作队列，宏工作 2 执行，打印 setTimeout2。

4. Node.js 中的事件循环

在 Node.js 中，事件循环体现出的状态与浏览器中大致相同。不同的是 Node.js 中有一套本人的模型。Node.js 中事件循环的实现是依附的 libuv 引擎。下图简要介绍了事件循环操作程序：

图片起源 Node.js 官网

  1. timers：本阶段执行曾经被 setTimeout() 和 setInterval() 的调度回调函数。
  2. pending callbacks：执行提早到下一个循环迭代的 I/O 回调。
  3. idle、prepare：仅零碎外部应用。
  4. poll：检索新的 I/O 事件; 执行与 I/O 相干的回调（简直所有状况下，除了敞开的回调函数，那些由计时器和 setImmediate() 调度的之外），其余状况 node 将在适当的时候在此阻塞。
  5. check：setImmediate() 回调函数在这里执行。
  6. close callbacks：一些敞开的回调函数，如：socket.on(‘close’, …)。

在每次运行的事件循环之间，Node.js 查看它是否在期待任何异步 I/O 或计时器，如果没有的话，则齐全敞开。

须要留神的是，宏工作与微工作的执行程序在 Node.js 的不同版本中体现也有所不同。同样通过一个具体的例子来剖析：

setTimeout(() => {console.log("timer1");
  Promise.resolve().then(function () {console.log("promise1");
  });
}, 0);

setTimeout(() => {console.log("timer2");
  Promise.resolve().then(function () {console.log("promise2");
  });
}, 0);
  1. 在 Node.js v11 及以上版本中一旦执行一个阶段里的一个宏工作（setTimeout，setInterval 和 setImmediate），会立即执行微工作队列，所以输入程序为timer1 => promise1 => timer2 => promise2。

  2. 在 Node.js v10 及以下版本，要看第一个定时器执行实现时，第二个定时器是否在实现队列中。

    • 如果第二个定时器还未在实现队列中，输入程序为timer1 => promise1 => timer2 => promise2。
    • 如果是第二个定时器曾经在实现队列中，输入程序为timer1 => timer2 => promise1 => promise2。

参考资料

  1. whatwg event loops
  2. wikipedia event loops
  3. Node.js event loops
退出移动版