由浅入深理解事件循环

小蝉儿
592 阅读12分钟

事件循环是浏览器的核心原理，没有事件循环，浏览器根本跑不起来，身为跟浏览器打交道的前端，事件循环的重要性不言而喻，下面让我们一起学习了解一下。

一、浏览器的进程模型

1.1、什么是进程？

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

  • 举个例子，像QQ，微信，游戏，他们都属于程序，程序里面它有变量啊，对象啊，函数啊，这些东西都得放内存里面，所以它需要有一块自己专属得内存空间，这块内存空间就是进程。
  • 那么每一个程序，启动得时候至少得有一个进程，且进程与进程之间是相互独立的，也就是内存空间之间是隔离的，QQ里面出现问题，崩溃了不影响微信，不会影响打游戏。
  • 但是进程之间能不能通信呢？比如说QQ里面想用微信那边得东西能不能用？不是说完全不行，通信只要双方同意就可以

1.2、什么是线程？

有了进程后就可以运行程序得代码了，运行代码得角色称之为线程

一个进程至少有一个线程，（计算机里面内存是寸土寸金的，没有在运行的进程会被杀死，回收内存空间）所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

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

举个例子理解一下：

image.png

以王者荣耀为例，王者荣耀是一个程序，也就是一个进程，启动时候呢，给他分配了一块内存空间，就是进程空间有了，它启动的时候呢，会产生一个主线程，他有很多事要做，比方说要处理登录注册之类的事情，要显示登录界面，有很多任务要一个个去做，然后呢，还有一个游戏线程来监控用户的操作，比如点击，键盘事件，然后呢，还要去跟随，还要去响应用户的操作，这些人物呢，要跟随着用户的操作来移动等等。还有就是网络线程要通信的，对吧，要看一下别人有没有移动，移动到哪了，放了什么技能，他要同时进行很多的事情，那么就产生了很多的线程，当然王者荣耀不只是这三个，有很多。

理解了进程和线程，下面来了解一下浏览器的进程模型。

1.3、浏览器有哪些进程和线程

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

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

image.png

浏览器启动后会开启多个进程，主要有三个（不止三个），我们要关心的就是这三个，一个浏览器进程，一个网络进程，一个渲染进程，从上图可以看到，每个进程有一块独立的内存空间，比方说网络这一块崩溃了，它不会影响到渲染和浏览器进程。

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

其中，最主要的进程有：

  1. 浏览器进程

    主要负责界面展示(标签页的样式，前进后退按钮，导航栏，浏览器皮肤)，用户交互（点击，滚动，键盘），子进程管理（浏览器进程内部会启动多个进程处理不同的任务，比如下面要说到的网络进程、渲染进程都是浏览器进程给启动起来的，所以叫子进程管理）

  2. 网络进程

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

  3. 渲染进程（重点关注）

    渲染进程启动后，会开启一个渲染主线程（我们写的前端代码都在这个线程里面执行），主线程负责执行HTML、JS、CSS代码。

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

同时开启很多标签页会占用大量内存，将来该默认模式可能会有所改变（针对不同平台。windows/Mac/Linux等，启动一个站点一个进程的模式，减少进程数量），有兴趣的同学可参见chrome官方说明文档

二、渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的进程，他需要处理的任务特别多：

  • 解析HTML
  • 解析CSS
  • 计算样式（em换算成px，百分比换算成px，样式冲突了等）
  • 布局（每个元素有多宽多高，位置在哪里）
  • 处理图层（z-index哪个在前哪个在后）
  • 每秒把页面画60次（让用户感觉到画面是流畅平滑的）
  • 执行全局JS代码
  • 执行事件处理函数
  • 执行计时器的回调函数
  • 。。。

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

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

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

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

image.png
  1. 在最开始的时候，渲染主线程会进入一个无限循环
  2. 每一次循环会检查消息队列中是否有任务存在，如果有，就取出第一个任务执行，执行完一个后进入下一次循环，如果没有，则进入休眠状态
  3. 其他所有线程（包括其他进程的线程），可以随时向消息队列添加任务。新任务会加到消息队列的末尾，在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续拿取任务。

比如说浏览器进程监听到用户点击了一个按钮，这时他会把按钮的事件处理函数作为一个任务拿去排队，浏览器主线程是不执行js代码的，但是可以把任务拿去排队等待渲染主线程去执行，再比如一个计时器到时间了，他又把这个回调函数拿去排队，等待执行。

这样一来，就可以让每个任务有条不紊的，持续的进行下去了。整个过程，被称之为事件循环

三、若干解释

3.1、何为异步

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

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

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

image.png

渲染主线程承担着极其重要的工作，无论如何都不能阻塞！ 因此，浏览器选择异步来解决这个问题。

image.png

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

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

  • JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个，而渲染主线程承担着许多的工作，渲染页面，执行JS都在其中运行。
  • 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行，这样起来，一方面会导致繁忙的主线程白白得消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
  • 所以浏览器采用异步的方式来避免，具体做法是当某些任务发生时，比如计时器，网络，事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

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

3.2、JS为何会阻碍渲染

因为渲染主线程是单线程的

3.3、 任务有优先级吗

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

根据W3C的最新解释：

每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行

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

在目前Chrome的实现中，至少包含了下面的队列：

  • 延时队列：用于存放计时器到达后的回调任务，优先级中
  • 交互队列，用于存放用户操作后产生的事件处理任务，优先级高
  • 微队列，用户存放需要最快执行的任务，优先级最高

添加任务到微队列的主要方式主要是使用Promise、MutationObserver 例如Promise.resolve().then(函数)

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

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

  • 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
  • 在Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到任务末尾即可
  • 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
  • 根据W3c官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列，不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务，但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行

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

不行。因为：

  1. 计算机硬件没有原子钟，无法做到精确计时（原子钟是一种使用原子物理性质来测量时间的设备，用于提供高精确度的时间基准。虽然原子钟在科学研究、导航系统和通信等领域广泛应用，但由于其复杂性和昂贵的成本，通常不会直接集成到计算机硬件中。）
  2. 操作系统的计时函数本身就有少量偏差，由于JS的计时器最终调用的是操作系统的函数，也就携带了这些偏差
  3. 按照W3C的标准，浏览器实现计时器时，如果嵌套层级超过5层，则会带有4毫秒的最少时间，这与浏览器的实现和性能有关
  4. 受事件循环的影响，计时器的回调函数只能在主线程空闲的时候运行，因此又带来了偏差。

下面来做三道题加深一下理解：

function delay(duration){
    var start=Date.now();
    while(Date.now()-start<duration){}
}
setTimeout(function(){
  console.log(1)
},0)
delay(1000);
console.log(2)

那么输出是1,2还是2，1呢

首先渲染主线程会执行全局JS，遇到定时器，此时浏览器开启一个计时线程，开始计时，计时线程这边计时时间到达后，将定时器任务加到延时队列计时，这个过程不会阻塞渲染主线程（就是通知一下计时线程），然后继续往下走，遇到delay函数，执行1000s的死循环，完了打印数字2。到目前为止，主线程任务都执行完了，按照优先级拿取任务，微队列没有任务，交互队列没有任务，延时队列有一个任务，拿过来执行，输出数字1。所以最后的结果是1000s后输出 2 1。

setTimeout(function(){
  console.log(1)
},0)
promise.resolve().then(function(){
   console.log(2)
})
console.log(3)

首先渲染主线程会执行全局JS，遇到定时器，通知计时线程计时，继续往下，遇到promise，将任务添加到微队列中，继续往下，打印数字3，此时主线程任务执行完毕，根据优先级拿取任务，执行微队列的任务，输出数字2，完了拿取延时队列的任务，执行，输出数字1.

function a(){
    console.log(1);
    promise.resolve().then(function(){
       console.log(2)
    })
}
setTimeout(function(){
    console.log(3)
    Promise.resolve().then(a)
},0)
promise.resolve().then(function(){
   console.log(4)
})
console.log(5)

遇到复杂的就画个图

image.png

avatar
文章
阅读
粉丝