[浏览器工作原理与实践] Day08 | 浏览器中的页面循环系统-一一网

消息队列和事件循环

对于一些确认好的任务，可以使用一个单线程来按照顺序处理这些任务。

要在线程执行过程中：接收并处理新的任务，就需要引入循环语句和事件系统（即：事件循环机制）。

相较于第一版的改进：

如果要接收其他线程任务发送过来的任务，就需要引入消息队列。

相较于第二版（第二版线程模型中，所有任务都来自于线程内部）改进：

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

如果其他进程想要发送任务给页面主线程，那么先通过IPC把任务发送给渲染进程的IO线程，IO线程再把任务发送给页面主线程。

由图看出，渲染进程专门有一个 IO 线程用来接收其他进程传进来的消息，接收到消息之后，会将这些消息组装成任务发送给渲染主线程。

浏览器的页面是通过消息队列和事件循环系统来驱动的。

为了支持定时器的实现，浏览器增加了延时队列。

使用setTimeout的一些注意事项：

注意：延迟队列也是宏任务，实际上blink维护了很多不同优先级的队列，这些队列里面都是宏任务。

延迟消息队列主要放一些定时执行的任务，如JavaScript设置定时器的回调，还有浏览器内部的一些定时回调任务！这类任务需要等到指定时间间隔之后才会被执行！

而正常的消息队列中的任务只会按照顺序执行，执行完上个任务接着执行下个任务，不需要关系时间间隔！

微任务是在宏任务执行过程中的某个时间点执行的，通常是在宏任务快要结束的时候执行。

页面中大部分的任务在主线程上执行，这些任务包括：

缺点：

宏任务的时间粒度比较大，执行的时间间隔不能精确控制，不能满足一些高实时性的需求。比如监听DOM变化的需求。

异步回调的概念，主要又两种方式：

第一种是异步回调函数封装成一个宏任务，添加到消息队列尾部，当循环系统执行到该任务的时候执行回调函数。 （比如setTimeout 和 XMLHttpRequest 的回调函数都是通过这种方式来实现的）
第二种方式的执行时机是在主函数执行结束之后、当前宏任务结束之前执行回调函数，这通常都是以微任务形式提现的。

微任务到底是什么呢？

微任务是怎么产生的?

第一种方式：使用 MutationObserver 监控某个 DOM 节点，然后再通过 JavaScript 来修改这个节点，或者为这个节点添加、删除部分子节点，当 DOM 节点发生变化时，就会产生 DOM 变化记录的微任务。
第二种方式：使用 Promise，当调用 Promise.resolve() 或者 Promise.reject() 的时候，也会产生微任务。

微任务队列是如何被执行的？