前端面试系列-JavaScript中的Event Loop(事件循环)机制(含图解)

た入场券 2022-11-11 14:57 163阅读 0赞

### 文章目录 ###

*  一、前言
 *   *  单线程
     *  非阻塞
 *  二、浏览器环境下js引擎的事件循环机制
 *   *  1.执行栈与事件队列
     *   *  执行上下文
         *  执行栈
         *  栈溢出
         *  事件队列（Task Queue）
         *  事件循环（Event Loop）
     *  2.微任务（micro task）和宏任务（macro task）
 *  三、node环境下的事件循环机制
 *   *  1.与浏览器环境的差异
     *  2.事件循环模型
     *  3.事件循环各阶段详解

# 一、前言 #

javascript是一门**单线程**的**非阻塞**的脚本语言。

## 单线程 ##

**单线程**：javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。

**单线程的原因**：浏览器中，我们需要进行各种各样的dom操作。如果javascript是多线程的，那么当两个线程同时对dom进行一项操作，例如一个向其添加事件，而另一个删除了这个dom，此时该如何处理呢？因此，为了保证不会 发生类似情景，javascript选择只用一个主线程来执行代码，这样就保证了程序执行的**一致性**。

单线程在保证了执行顺序的同时也限制了javascript的效率，因此开发出了**web worker**技术。这项技术号称让javascript成为一门多线程语言。但是所有新线程都受主线程的完全控制，不能独立执行。这意味着这些“线程” 实际上应属于主线程的子线程。这些子线程并没有执行I/O操作的权限，只能为主线程分担一些诸如计算等任务。所以严格来讲这些线程并没有完整的功能，也因此这项技术并非改变了javascript语言的**单线程**本质。

## 非阻塞 ##

当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。

javascript引擎实现非阻塞的关键就是——**event loop（事件循环）**

# 二、浏览器环境下js引擎的事件循环机制 #

## 1.执行栈与事件队列 ##

当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。

### 执行上下文 ###

当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。

### 执行栈 ###

当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

当一个脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入**执行栈**中，然后从头开始执行。如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的**执行环境**，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。这个过程反复进行，直到执行栈中的代码全部执行完毕。

### 栈溢出 ###

一个方法执行会向执行栈中加入这个方法的执行环境，在这个执行环境中还可以调用其他方法，甚至是自己，其结果不过是在执行栈中再添加一个执行环境。这个过程可以是无限进行下去的，除非发生了栈溢出，即超过了所能使用内存的最大值。

### 事件队列（Task Queue） ###

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。

### 事件循环（Event Loop） ###

被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]

## 2.微任务（micro task）和宏任务（macro task） ##

以下事件属于宏任务：

*  整体Script代码
 *  setInterval()
 *  setTimeout()
 *  setImmediate()
 *  promise声明里面的代码

以下事件属于微任务

*  new MutaionObserver()
 *  Promise的then
 *  process.nextTick

在当前执行栈为空的时候，主线程会 查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈…如此反复，进入循环。

当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。**同一次事件循环中，微任务永远在宏任务之前执行。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 1]  
例子：

setTimeout(function () {
        console.log(1);
    });
    
    new Promise(function(resolve,reject){
        console.log(2)
        resolve(3)
    }).then(function(val){
        console.log(val);
    })
    console.log(4);
    //2
    //4
    //3
    //1

# 三、node环境下的事件循环机制 #

## 1.与浏览器环境的差异 ##

在node中，事件循环表现出的状态与浏览器中大致相同。不同的是node中有一套自己的模型。node中事件循环的实现是依靠的libuv引擎。node选择chrome v8引擎作为js解释器，v8引擎将js代码分析后去调用对应的node api，而这些api最后则由libuv引擎驱动，执行对应的任务，并把不同的事件放在不同的队列中等待主线程执行。 因此实际上node中的事件循环存在于libuv引擎中。

## 2.事件循环模型 ##

一个libuv引擎中的事件循环的模型:

┌───────────────────────┐
    ┌─>│        timers         │
    │  └──────────┬────────────┘
    │  ┌──────────┴────────────┐
    │  │     I/O callbacks     │
    │  └──────────┬────────────┘
    │  ┌──────────┴────────────┐
    │  │     idle, prepare     │
    │  └──────────┬────────────┘      ┌───────────────┐
    │  ┌──────────┴────────────┐      │   incoming:   │
    │  │         poll          │<──connections───     │
    │  └──────────┬────────────┘      │   data, etc.  │
    │  ┌──────────┴────────────┐      └───────────────┘
    │  │        check          │
    │  └──────────┬────────────┘
    │  ┌──────────┴────────────┐
    └──┤    close callbacks    │
       └───────────────────────┘
    *注：模型中的每一个方块代表事件循环的一个阶段*

这个模型是node官网上的一篇文章中给出的。

## 3.事件循环各阶段详解 ##

从上面这个模型中，我们可以大致分析出node中的事件循环的顺序：

外部输入数据–>轮询阶段(poll)–>检查阶段(check)–>关闭事件回调阶段(close callback)–>定时器检测阶段(timer)–>I/O事件回调阶段(I/O callbacks)–>闲置阶段(idle, prepare)–>轮询阶段…

这些阶段大致的功能如下：

*  poll: 等待新的I/O事件，node在一些特殊情况下会阻塞在这里。
 *  check: setImmediate()的回调会在这个阶段执行。
 *  close callbacks: 例如socket.on(‘close’, …)这种close事件的回调。
 *  timers: 这个阶段执行定时器队列中的回调如 setTimeout() 和 setInterval()。
 *  I/O callbacks: 这个阶段执行几乎所有的回调。但是不包括close事件，定时器和setImmediate()的回调。
 *  idle, prepare: 这个阶段仅在内部使用，可以不必理会。

[参考链接][Link 1]

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115048135][https_blog.csdn.net_qq_39903567_article_details_115048135]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/b17220bfda5747cc9233c20cc628c61c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210321132153355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3,size_16,color_FFFFFF,t_70#pic_center
[Link 1]: https://zhuanlan.zhihu.com/p/33058983
[https_blog.csdn.net_qq_39903567_article_details_115048135]: https://blog.csdn.net/qq_39903567/article/details/115048135