事件循环(消息队列)

一、浏览器进程模型

? ? ? 何为进程？

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

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

? ? ? 何为线程？

? ? ? ? 在进程中，有了代码就需要跑代码了，跑代码的单元称之为线程。

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

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

????????

? ? ? 浏览器有哪些线程和进程？

????????浏览器是一个多进程多线程的应用程序。? ?

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

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

? ? ? 最主要的进程：

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

? ? ? ? 2.网络进程：负责加载网络。同理，进程内部也会启动多个线程来处理不同的网络任务。

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

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

?二、事件循环(消息队列)。

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

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

为什么渲染进程不适?多个线程来处理这些事情？

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

? ? ? ? 比如：

? ? ? ? 1.我在执行JS函数，执行到一半用户点击了按钮，我应该立即去执行点击事件的处理函数吗？

? ? ? ? 2.我正在执行JS函数，执行到一般计时器到达了时间，我应该去立即执行它的回调函数吗？

? ? ? ? 3.浏览器通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该去处理哪一个呢？

? ? ? ? 4....................

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

????????

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

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

? ? ? ? 3.其他所有线程可以随时向消息队列添加任务。新任务会加到消息队列末尾。在添加任务是，如果渲染主线程是休眠状态，则会将其唤醒以继续循环拿取任务。

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

? ? ? ? 整个过程称之为事件循环(消息队列)。

三、异步。

????????代码在执?过程中，会遇到?些?法?即处理的任务，?如：

? ? ? ? 1.计时完成后需要执?的任务 —— setTimeout 、 setInterval

? ? ? ? 2.?络通信完成后需要执?的任务 -- XHR 、 Fetch

? ? ? ? 3.?户操作后需要执?的任务 -- addEventListene

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

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

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

?????????使?异步的?式，渲染主线程永不阻

四、优先级。

? ? ? ? 任务没有优先级，在消息队列中先进先出。但消息队列是有优先级的。

? ? ? 根据W3C的最新解释：

? ? ? ? 1. 每个任务都有任务类型，同类型的任务必须在同一个队列，不同类型的任务可以分属不同队列。在一次事件循环中，浏览器可以根据实际情况从不同队列中拿取任务执行。

? ? ? ? 2. 浏览器必须准备好一个微队列，微队列中任务的优先级高于其他所有任务执行。

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

??????在?前 chrome 的实现中，?少包含了下?的队列?：

? ? ? ? 1.延时队列： 存放计时器到达时间后的回调任务，优先级(中)

? ? ? ? 2.交互队列： 用于存放用户操作后的事件处理任务，优先级(高)

? ? ? ? 3.微队列： 用户存放需要最快执行的任务，优先级(最高)

? ? ? ? 还有其他队列，对我们开发帮助不大，不做考虑。

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

例如：

// ?即把?个函数添加到微队列
Promise.resolve().then(函数)

五、常问问题。

1.如何理解 JS 的异步

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

渲染主线程承担着诸多的?作，渲染??、执? JS 都在其中运?。如果使?同步的?式，就极有可能导致主线程产?阻塞，从?导致消息队列 中的很多其他任务?法得到执?。这样?来，???会导致繁忙的主线程??的消耗时间，另???导致???法及时更新，给?户造成卡死现象。

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

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

2.简述JS的事件循环。

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

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

过去把消息队列简单分为宏队列和微队列，这种说法已经无法满足日益复杂的浏览器环境了。

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

3. JS 中的计时器能做到精确计时吗？为什么？?

不可以。

原因：?

? ? ? ? ①计算机没有原子钟，无法做到精确计时。

? ? ? ? ②操作系统的计时函数本身就会有时间偏差，由于JS计时器最终调用的还是操作系统的函数，便携带了这些偏差。

? ? ? ? ③浏览器实现计时器时，如果层级嵌套超过5级，则会最少带有4毫秒的偏差，这样在计时时间少于4毫秒的时候就带来了影响。

? ? ? ? ④受事件循环的影响，计时器的回调函数只能在主线程空闲的时候执行，因此又带来了偏差。