由浅入深理解事件循环

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