【Web】什么是web的事件循环？

简言

记录下web的事件循环解释。

事件循环

前置知识

网页进程

现代浏览器是多进程架构浏览器，一个标签是一个进程，进程有多个线程。
一个网页标签进程主要有以下线程：

• 主线程：除了运行网页本身的代码之外，还负责收集和派发用户和其他事件，以及渲染和绘制网页内容等。
• 合成线程：合成线程负责将渲染树转换为图层,并执行图层的合成操作，负责页面的滚动和动画等操作，可以在不需要主线程参与的情况下独立完成部分工作，以提高性能。
• GPU 线程：处理 GPU 任务，例如 WebGL 或者 CSS 3D 变换等。
• I/O 线程：处理磁盘和网络 I/O。
• 定时器线程：setTimeout、setInterval的计时在这上面进行。
• worker线程（Worker Thread）：执行 Web Worker 或 Service Worker 的代码。

任务和微任务

哪些任务属于任务？

（1）整体的 script 代码（也就是一开始的全局代码）

（2）setTimeout 和 setInterval 的回调

（3）setImmediate 的回调（Node.js 环境）

（4）I/O 操作的回调函数（主要是早期，I/O 操作通常使用回调函数来处理异步结果。现代JavaScript中不管是浏览器的网络请求，还是nodejs的网络请求和文件读写，普遍返回promise，因此属于微任务）

（5）用户交互事件（如 click、keydown 等）

（6）UI 渲染更新

（7）postMessage、MessageChannel

（8）WebWorker 的 message 事件

哪些任务属于微任务？

（1）Promise 的 then 和 catch 的回调

（2）process.nextTick 的回调（Node.js 环境）

（3）MutationObserver 的回调

（4）queueMicrotask 方法的回调

（5）async/await（实际上是通过 Promise 实现的）

为什么要有微任务？你可以理解为，都是回调，但是有一些的优先级要比其他的更高，所以被单独放入了一个队列里，并把这些任务定义为微任务。所以微任务队列调度优先级高。

解释

web的事件循环是一种解释执行网页代码的机制。
**事件循环负责收集事件（包括用户事件以及其他非用户事件等）、对任务进行排队以便在合适的时候执行回调。**然后它执行所有处于等待中的 JavaScript 任务，然后是微任务，然后在开始下一次循环之前执行一些必要的渲染和绘制操作
事件循环是在主线程中运行的。
类似于：

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

事件循环驱动着浏览器中发生的一切，因为它与用户的交互有关，但对于我们这里的目的来说，更重要的是它负责调度和执行在其线程中运行的每一段代码。
一次事件循环的流程：

1. 执行同步代码（包括一开始的全局代码，或者后面从任务（也可以叫宏任务）队列取出的同步代码。）
2. 执行微任务队列的代码，清空微任务队列（体现优先级高）。
3. 尝试进行和绘制（不一定立刻重新渲染，浏览器为了提高渲染效率，可能会把几次渲染合并进行。）。
4. 从任务队列中取出下一个任务，进入下一次事件循环。

案例

Promise.resolve()
  .then(() => {	//	then1
    console.log(0);
    return Promise.resolve(4);	//	then2
  })
  .then((res) => {	//	then4
    console.log(res);
  });

Promise.resolve()
  .then(() => { // then1 
    console.log(1);
  })
  .then(() => {	//	then2 
    console.log(2);
  })
  .then(() => {	//	then3
    console.log(3);
  })
  .then(() => {	//	then5
    console.log(5);
  })
  .then(() => {	// then6 
    console.log(6);
  });

都是微任务，结果：
0，1，2，3，4，5，6
流程：

1. then1先进微任务队列 , 结果输出 0，1 ，将Promise.resolve(4)的promise对象推入微队列，

2. then2 进入微队列， 输出2

3. 将return Promise.resolve(4)返回的promise值(还是promise对象)推入微队列

4. then3 进入微队列 输出 3

5. then4 进入微队列 输出 4

6. then5 进入微队列 输出 5

7. then6 进入微队列 输出 6

结语

结束了。