如何解释Event Loop面试官才满意？

一时失言乱红尘 2023-01-11 13:11 129阅读 0赞

每天都在写JavaScript的你，是否清楚JavaScript引擎的原理呢？

想要了解JavaScript引擎，首先我们从它的运行机制Event Loop来说起。

首先科普一些基础知识。

**进程和线程**

**进程**

应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其他系统资源所组成。

**线程**

线程是进程内的一个独立执行单元，在不同的线程之间是可以共享进程资源的。

有句老话是这样说的，穷养儿子富养女。

**进程就是一个富二代爸爸，它选择了穷养线程儿子。**

![format_png][]

进程拥有独立的堆栈空间和数据段，每当启动一个新的进程必须分配给它独立的地址空间，建立众多的数据表来维护它的代码段、堆栈段和数据段。

线程拥有独立的堆栈空间，但是共享数据段，它们彼此之间使用相同的地址空间，共享大部分数据，比进程更节俭，开销比较小，切换速度也比进程快，效率高。

**一句话解释进程和线程**

进程：资源分配的最小单位

线程：程序执行的最小单位

关于进程和线程方面的知识我们先了解到这，感兴趣的同学们可以移步

https://www.cnblogs.com/Jones-dd/p/8858995.html

Q&A再来回答一个问题：

在多线程操作下可以实现应用的并行处理，从而以更高的 CPU 利用率提高整个应用程序的性能和吞吐量。特别是现在很多语言都支持多核并行处理技术，然而 JavaScript 却以单线程执行，为什么呢？

答：JavaScript作为脚本语言，最初被设计用于浏览器。为了避免复杂的同步问题(做人嘛，还是简单点好，语言也一样)，如果JavaScript同时有两个线程，一个线程中执行在某个DOM节点上添加内容，另一个线程执行删除这个节点，这时浏览器会……

![format_png 1][]

所以JavaScript的单线程是这门语言的核心，未来也不会改变。

有人说，那HTML5的新特性Web Worker，可以创建多线程呀～

是的，为了解决不可避免的耗时操作(多重循环、复杂的运算)，HTML5提出了Web Worker，它会在当前的js执行主线程中开辟出一个额外的线程来运行js文件，这个新的线程和js主线程之间不会互相影响，同时提供了数据交换的接口：postMessage和onMessage。

但是因为它创建的子线程完全受控于主线程，且位于外部文件中，无法访问DOM。所以它并没有改变js单线程的本质。

单线程就意味着，所有的任务都需要排队。

就像还不能自助点餐的时候你去肯德基需要排队，有的人没想好点什么或者点的东西很多，耗时就会长，那么后面的人也只好排队等待。有了自助点餐服务后，一切问题迎刃而解。

![format_png 2][]

语言的设计和生活中的现实情况很像，IO设备(输入输出)很慢(比如Ajax)，那么语言的设计者意识到这一点，就在主线程中挂起处于等待中的任务，先运行后面的任务，等IO设备有了结果，再把挂起的任务执行下去。

**Event Loop **

![format_png 3][]

从上图中我们可以看到，在主线程运行时，会产生堆(heap)和栈(stack)。

堆中存的是我们声明的object类型的数据，栈中存的是基本数据类型以及函数执行时的运行空间。

栈中的代码会调用各种外部API，它们在任务队列中加入各种事件(onClick,onLoad,onDone)，只要栈中的代码执行完毕(js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空)，主线程就回去读取任务队列，在按顺序执行这些事件对应的回调函数。

也就是说主线程从任务队列中读取事件，这个过程是循环不断的，所以这种运行机制又成为Event Loop(事件循环)。

**同步任务和异步任务**

我们可以将任务分为同步任务和异步任务。

同步任务就是在主线程上排队执行的任务，只能执行完一个再执行下一个。

异步任务则不进入主线程，而是先在event table中注册函数，当满足触发条件后，才可以进入任务队列来执行。只有任务队列通知主线程说，我这边异步任务可以执行了，这个时候此任务才会进入主线程执行。

举个????

console.log(a);
    
    
    setTimeout(
      function () {
          console.log(b);
      },1000)
      
    console.log(c)
    
    
    // a
    // b
    // c

> 1.console.log(a)是同步任务，进入主线程执行，打印a。
> 
> 2.setTimeout是异步任务，先被放入event table中注册，1000ms之后进入任务队列。
> 
> 3.console.log(c)是同步任务，进入主线程执行，打印c。
> 
> 当a，c被打印后，主线程去事件队列中找到setTimeout里的函数，并执行，打印b。

综上所述，b最持久～(扯个????)

**宏任务和微任务**

同步任务和异步任务的划分其实并不准确，准确的分类方式是宏任务(Macrotask)和微任务(Microtask)。

宏任务包括：

> script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

微任务包括：

> process.nextTick, Promise,
> 
> Object.observe(已废弃), MutationObserver(html5新特性)。

这种分类的执行方式就是，执行一个宏任务，过程中遇到微任务时，将其放到微任务的事件队列里，当前宏任务执行完成后，会查看微任务的事件队列，依次执行里面的微任务。如果还有宏任务的话，再重新开启宏任务……

![format_png 4][]

再举个????

setTimeout(function() {
      console.log('a')
    });
    
    
    new Promise(function(resolve) {
      console.log('b');
    
    
      for(var i =0; i <10000; i++) {
        i ==99 && resolve();
      }
    }).then(function() {
      console.log('c')
    });
    
    
    console.log('d');
    
    
    // b
    // d
    // c
    // a

> 1.首先执行script下的宏任务，遇到setTimeout，将其放入宏任务的队列里。
> 
> 2.遇到Promise，new Promise直接执行，打印b。
> 
> 3.遇到then方法，是微任务，将其放到微任务的队列里。
> 
> 4.遇到console.log('d')，直接打印。
> 
> 5.本轮宏任务执行完毕，查看微任务，发现then方法里的函数，打印c。
> 
> 6.本轮event loop全部完成。
> 
> 7.下一轮循环，先执行宏任务，发现宏任务队列中有一个setTimeout，打印a。

综上所述，不要说a是最持久的，如果你认为你彻底明白了，给你出道题，看看下面的代码中，谁最持久？

console.log('a');
    
    
    setTimeout(function() {
        console.log('b');
        process.nextTick(function() {
            console.log('c');
        })
        new Promise(function(resolve) {
            console.log('d');
            resolve();
        }).then(function() {
            console.log('e')
        })
    })
    process.nextTick(function() {
        console.log('f');
    })
    new Promise(function(resolve) {
        console.log('g');
        resolve();
    }).then(function() {
        console.log('h')
    })
    
    
    setTimeout(function() {
        console.log('i');
        process.nextTick(function() {
            console.log('j');
        })
        new Promise(function(resolve) {
            console.log('k');
            resolve();
        }).then(function() {
            console.log('l')
        })
    })

![format_png 5][]

好，不要怂，我们来逐步分析。

**第一轮事件循环：**

> 1.第一个宏任务(整体script)进入主线程，console.log('a')，打印a。
> 
> 2.遇到setTimeout，其回调函数进入宏任务队列，暂定义为setTimeout1。
> 
> 3.遇到process.nextTick()，其回调函数被分发到微任务队列，暂定义为process1。
> 
> 4.遇到Promise，new Promise直接执行，打印g。then进入微任务队列，暂定义为then1。
> 
> 5.遇到setTimeout，其回调函数进入宏任务队列，暂定义为setTimeout2。

此时我们看一下两个任务队列中的情况：

宏任务队列：setTimeout1、setTimeout2

微任务队列：process1、then1

第一轮宏任务执行完毕，打印出a和g。

查找微任务队列中有process1和then1。全部执行，打印f和h。

第一轮事件循环完毕，打印出a、g、f和h。

**第二轮事件循环：**

> 1.从setTimeout1宏任务开始，首先是console.lob('b')，打印b。
> 
> 2.遇到process.nextTick()，进入微任务队列，暂定义为process2。
> 
> 3.new Promise直接执行，输出d，then进入微任务队列，暂定义为then2。

此时两个任务队列中

宏任务队列：setTimeout2

微任务队列：process2、 then2

第二轮宏任务执行完毕，打印出b和d。

查找微任务队列中有process2和then2。全部执行，打印c和e。

第二轮事件循环完毕，打印出b、d、c和e。

**第三轮事件循环：**

> 1.执行setTimeout2，遇到console.log('i')，打印i。
> 
> 2.遇到process.nextTick()，进入微任务队列，暂定义为process3。
> 
> 3.new Promise直接执行，打印k。
> 
> 4.then进入微任务队列，暂定义为then3。

此时两个任务队列中

宏任务队列：空

微任务队列：process3、then3

第三轮宏任务执行完毕，打印出i和k。

查找微任务队列中有process3和then3。全部执行，打印j和l。

第三轮事件循环完毕，打印出i、k、j和l。

到此为止，三轮事件循环完毕，最终输出结果为：

> a、g、f、h、b、d、c、e、i、k、j、l

l最持久，你答对了吗？

以上代码仅在浏览器环境中执行顺序如下，**node环境下可能存在不同**。

看完本文希望你能够理解JavaScript引擎的Event Loop执行机制，不仅可以让我们更加深刻的认识JavaScript这门语言，而且面试被问起的时候可以和面试官侃侃而谈。

如果觉得看完本文有所收获，请点击右下角在看支持，感谢支持。![format_png 6][]

[format_png]: /images/20221119/20e168baa0144bc68933aecbeeefffb7.png
[format_png 1]: /images/20221119/96f229ef126d4d4abe05609db7a36da9.png
[format_png 2]: /images/20221119/1813d621900b465182a5e7dd0d56e5cb.png
[format_png 3]: /images/20221119/5c3f0bb629984b8a8392c68e6b811adf.png
[format_png 4]: /images/20221119/43d60548b104408d884ee135c5b9cff8.png
[format_png 5]: /images/20221119/f241e231dd22441b880a46c6b06bb715.png
[format_png 6]: /images/20221119/17d59d99cbf64c408ad257a6f549e8ba.png