JavaScript 引擎的事件循环机制是怎样工作的?

发布于 2020-10-14 14:09
浏览
0收藏

 

JavaScript 引擎的事件循环机制是怎样工作的?-开源基础软件社区

当拿到一段JavaScript代码时,JavaScript引擎便开始执行。但是,这个执行过程并不是一蹴而就的,当宿主遇到一些特殊事件时,会继续把一段代码传递给它,去执行。此外,我们还可能提供API给JavaScript引擎,比如 setTimeout 这样的API,它允许JavaScript引擎在特定时机执行。

 

所以,我们应该有一个基本认识:一个JavaScript引擎会常驻于内存中,在一直等待宿主把代码传递给它执行。

 

事件循环


数据结构


栈 


函数调用形成的一个由若干帧组成的指令序列,符合“后进先出”的特点。例如下面这段代码

    function foo(b) {
        let a = 10;
        return a + b + 11;
    }

    function bar(x) {
        let y = 3;
        return foo(x * y);
    }

    console.log(bar(7)); // 返回 42

 

当调用 bar 时,第一个帧被创建并压入栈中,帧中包含了 bar 的参数和局部变量。

当 bar 调用 foo 时,第二个帧被创建并被压入栈中,放在第一个帧之上,帧中包含 foo 的参数和局部变量。

当 foo 执行完毕然后返回时,第二个帧就被弹出栈(剩下 bar 函数的调用帧 )。当 bar 也执行完毕并返回时,第一个帧也被弹出,栈就被清空了。

 


对象被分配在堆中,是用来表示一大块内存区域的计算机术语。

JavaScript 引擎的事件循环机制是怎样工作的?-开源基础软件社区

机制


任务队列


把所有待处理的任务统统排入一个队列中,按照“先进先出”的顺序调度执行。这里的任务包括用户主动操作,比如按键、滚动等,也包括I/O,异步函数的回调,等等。

 

每个任务执行完毕后,后面的任务才能被执行。很明显,一个明显的缺点在于,当一个任务需要花费大量时间才能执行完毕时,应用程序就无法处理与用户的交互,例如点击或滚动。

 

为了解决这个问题,浏览器一般会弹出一个“这个脚本运行时间过长”的对话框,提示用户通过关闭网页杀死当前进程。所以,为了避免这种现象,最好通过优化尽可能减少程序的运行时间。

 

事件循环


所谓事件循环,就是JavaScript引擎会无休止地运行着,等待各种事件的到来。当接收到事件,如果引擎空闲着,则直接运行。否则,就需要一个“事件队列”把所有待执行的任务排列起来,待引擎执行完前面的任务,再取出事件队列中的第一个任务,执行。这样,直到任务队列变空为止。

 

JavaScript 引擎的事件循环机制是怎样工作的?-开源基础软件社区

 

算法其实非常简单,按照下面的逻辑执行。

 

  1. 如果任务队列非空,则取出第一个任务,执行;
  2. 等待新任务,然后转向 1。

 

用代码表示如下:


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

 

同步任务和异步任务


我们都知道,JavaScript引擎是单线程运行机制,这就造成一个严重的问题:因为等待临界资源而浪费CPU资源,比如由于等待I/O而阻塞了主线程上的其他任务。

 

对于这一问题,JavaScript的设计者们意识到,这时候完全可以不用管I/O任务,挂起处于等待中的任务,先执行排在后面的任务,等到IO任务完成时,再回来执行挂起的任务,这不更好吗?

 

于是,把所有任务分成两种:

 

  • 同步任务。在主线程上排队执行的任务,前一个任务执行完毕,后一个任务才能执行,用一个“执行栈”维持顺序;
  • 异步任务。不进入主线程,进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

JavaScript 引擎的事件循环机制是怎样工作的?-开源基础软件社区

回调函数

 

所谓“回调函数”,就是那些会被主线程挂起、等任务执行完毕再进入主线程执行栈的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

 

这样一来,JavaScript的事件循环机制具体为:

 

  1. JavaScript引擎把所有任务分为同步任务和异步任务;
  2. 同步任务用一个“执行栈”维持次序,主线程只执行来自执行栈的同步任务;
  3. 异步任务直接被挂起,等一旦有了运行结果,则把它的回调函数排入“任务队列”中;
  4. 等执行栈一清空,"任务队列"里第一个事件就自动进入主线程,执行;
  5. 一直运行,直到所有任务执行完。

这就是JavaScript事件循环的核心内容,它让JavaScript即使只支持单线程,也能永不阻塞。

JavaScript 引擎的事件循环机制是怎样工作的?-开源基础软件社区

在上图中,当JavaScript引擎开始运行时,产生堆(heap)、栈(stack)和任务队列。堆中保存着所有对象资源,栈中主要保存着同步任务,有的可以调用外部API,这些API又可以为“任务队列”添加一些任务,比如 onClick onLoad 等,还有用户在Promise中创建的任务。只要栈中的代码执行完毕,主线程就会去读取"任务队列"中的异步任务的回调函数,执行。

 

执行机制

经过上面的解释,我们知道JavaScript事件循环基本就是反复“等待-执行”。但实际上,这里的每次执行过程,其实只是一个宏观任务。

 

宏观任务

 

何谓宏观任务?它大致相当于事件循环,但又不全是;准确讲,是由宿主发起的任务。

 

在每一个宏观任务中,都包含了一个微观任务队列,用来组织前面提到的各种同步任务和异步任务。一个宏观任务完成之后,才能执行下一个宏观任务。宏观任务主要通过下面这些操作创建:

  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame
  • I/O
  • UI rendering

 

微观任务

一个宏观任务中的所有任务都是微观任务,主要是通过Promise创建的异步任务。另外,还可以通过queueMicrotaskMutationObserver创建,Node.js的process.nextTick也可以。

 

JavaScript 引擎的事件循环机制是怎样工作的?-开源基础软件社区

有了宏观任务和微观任务机制,我们就可以分别实现宿主级别和JavaScript引擎级别的任务了,比如setTimeout等宿主API会添加宏观任务,而Promise只在当前宏观任务中添加微观任务,这有助于我们理解一些特殊的代码执行逻辑。

 

Promise


Promise是JavaScript提供的一种标准化的异步管理方式,它的主要思想是,在需要进行I/O、等待或者其它异步操作时,不返回真实结果,而返回一个承诺。函数的调用方可以在合适的时机,选择等待并兑现这个承诺(通过Promise的then方法的回调)。


    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });

    r.then(() => console.log("c"));
    console.log("b")

 

执行这段代码,得到的结果是:a b c。

 

在进入 console.log("b") 之前, r 已经得到了resolve,但是Promise中的 resolve 始终是异步操作,先会加入任务队列中,等到**执行栈**清空之后,才会真正执行 resolve,因此, c 在最后被执行。

 

接下来,加入宿主APIsetTimeout,看看能发现什么新东西。


    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });

    setTimeout(()=>console.log("d"), 0)
    r.then(() => console.log("c"));
    console.log("b")

 

我们发现,无论在那种浏览器中, d 都在 c 之后执行。

 

这是因为,Promise发起的是JavaScript引擎级别的微任务,它依附于当前宏任务,会优先执行;而setTimeout是浏览器API,是由宿主发起的,是一个宏任务,在当前宏任务完成之后才开始执行。

 

下面是一个小实验,先执行一个耗时操作,再提交Promise。


    setTimeout(()=>console.log("d"), 0)

    var r1 = new Promise(function(resolve, reject){
        resolve()
    });

    r.then(() => { 
        var begin = Date.now();
        while(Date.now() - begin < 1000);
        console.log("c1") 
        new Promise(function(resolve, reject){
            resolve()
        }).then(() => console.log("c2"))
    });

 

经过执行后发现,即使是延时1秒提交Promise, d 依然是最后被执行的,这很好地解释了微任务优先执行的代码执行机制。

 

经过这些实验可知,JavaScript代码的执行机制为:

 

分析有多少个宏任务;
在每个宏任务中,分析有多少个微任务;
根据微任务的调用次序,确定每个宏任务中的微任务执行次序;
根据宏任务的触发规则和调用次序,确定宏任务的执行次序;
按上面确定好的次序,依次执行。


async/await


 async/await 是ES2016加入的新特性,以此可以为 for、if 等代码结构编写异步代码,它的运行时基础是Promise。

 

 在function前加上 async ,函数就会变成异步函数,返回Promise,还可以在 async 函数中用 await 来等待一个Promise。这样,便可以想编写同步代码一样,编写异步代码。


  function sleep(duration) {
      return new Promise(function(resolve, reject) {
          setTimeout(resolve,duration);
      })
  }

  async function foo(){
      console.log("a")
      await sleep(2000)
      console.log("b")
  }

 

 并且,async/await 还可以嵌套,这才是最强大的地方。


    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve,duration);
        })
    }

    async function foo(name){
        await sleep(2000)
        console.log(name)
    }

    async function foo2(){
        await foo("a");
        await foo("b");
    }
 

 

 总结

JavaScript事件循环机制的核心主要包含下面几点:

 

 1. 同步任务和异步任务的划分,让JavaScript代码的执行效率有了基础保证;

 2. 任务队列和回调函数的出现,让异步任务可以有序执行,同时还不会阻塞主线程;

 3. 宏(观)任务和微(观)任务的划分,区分出宿主级别和引擎级别的任务,并保证了更细粒度的执行次序;

 4. await 和 async 的加入,让编写JavaScript异步函数更加容易,同时功能也更加强大。

 

 

 

 

 

版权声明: 本文为 InfoQ 作者【Walker】的原创文章。

 

 

收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐