JS进阶---事件循环

我会带着你远行 2023-05-22 06:57 25阅读 0赞

# 事件循环 #

//输出结果是多少呢，先输出'abc'还是先交叉输出
    //还是先输出i呢
    setTimeout(function func1() { 
       console.log("abc")
     }, 0);
     for (var i = 0; i < 10000; i++) { 
         console.log(i);
     }

## 概念 ##

ps:最后有面试题哦

1.  **浏览器、JS、执行引擎的关系**

JS：一门计算机语言，提供了表达程序逻辑的语法和实现基本功能的API

浏览器：JS语言的真实运行环境，又称之为JS的宿主环境

JS执行引擎：JS宿主环境（例如浏览器）中的一个功能模块，用于解析并执行JS

它们的关系如下：

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

1.  **进程 和 线程**

进程：当一个应用程序运行时，需要使用内存和CPU资源，这些资源需要向操作系统申请。操作系统以进程的方式来分配这些资源，一个进程就代表着一块独立于其他进程的内存空间。一个应用程序要运行，必须至少有一个进程启动。进程的最大特点是**独立**，一个进程不能随意的访问其他进程的资源。这就保证了多个程序在操作系统上运行互不干扰。

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

线程：可能要同时执行多个任务，每个任务需要在一个线程上运行，线程与线程之间**相对独立**，但可以共享应用程序的进程数据。

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

1.  **如何理解JS的单线程**

我们之所以称JS为单线程的语言，是因为它的执行引擎只有一个线程，并且不会在执行期间开启新的线程。而并非浏览器是单线程的。

单线程的应用程序具有以下的特点：

*  易于学习和理解：所有代码都是按照顺序从上到下执行的
 *  易于掌控程序：由于代码都按照顺序执行，不会出现中断，也没有共享资源的争夺问题，极大的降低了开发难度。
 *  更加合理的利用计算机资源：创建新的线程和销毁线程都会耗费额外的CPU和内存资源，没有良好的线程设计，将导致程序运行效率低下。而单线程的应用不受此影响

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

1.  **JS如何处理多任务**

任何一个程序在执行期间都可能会开启多个任务，比如：

1). 任务1：程序启动时开始进行一些操作  
2). 任务2：开启一个计时器，每隔一段时间去做一些事  
3). 任务3：监听按钮是否被点击，当按钮被点击后，去做一些事

由于JS的执行线程只有一个，因此，它通过异步的方式来解决这些任务

下面是单线程的异步和多线程的对比

多线程：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 4]  
可以看到，如果以多线程的方式运行，会导致程序代码在某些时候会有重叠执行的情况出现，如果这些代码凑巧在使用共享数据，将难以控制最终的运行结果。

而使用异步的方式就解决了该问题：

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

可以看出，使用异步之后，所有的JS代码都在单个线程中执行，不会出现多个任务同时执行的情况，自然就不会出现资源争夺的问题。

1.  **同步代码 和 异步代码**

同步代码：程序启动后，在JS执行线程上立即执行的任务代码

异步代码：收到宿主环境（浏览器）的其它线程通知，即将在JS执行线程上执行的代码，例如计时器回调函数中的代码，事件中的代码。JS中的异步代码往往放到一个函数中，该函数成为异步函数，或者描述为，该函数是异步的

1.  **执行栈**

为了保证JS代码有序的执行，JS执行引擎使用执行栈来组织JS代码

每当调用一个函数时，都会在执行栈中创建一个执行上下文，上下文中提供了函数执行需要的环境，创建了上下文之后，再执行函数

## 事件循环 ##

事件循环是JS处理异步函数的具体方法

具体的做法是：

1.  执行 执行栈 中的代码
2.  遇到一些特殊代码交给浏览器的其他线程处理
3.  将执行栈中的代码全部执行完毕
4.  从事件队列中取出第一个任务放入执行栈，然后重复第1步

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

事件队列在不同的宿主环境中有所差异，大部分宿主环境会将事件队列进行细分。在浏览器中，事件队列分为两种：

*  宏任务（队列）：macroTask，计时器结束的回调、事件回调、http回调等等绝大部分异步函数进入宏队列
 *  微任务（队列）：microTask，Promise.then, [MutationObserver][]

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

当执行栈清空时，JS引擎首先会将微任务中的所有任务依次执行结束，如果没有微任务，则执行宏任务。

如果上面文章都懂了，那么来道题目开开胃吧!  
这道题目要好好的思考一下，在这里就不公布答案了，可以自己运行一下看看答案正确与否

setTimeout(function func1() { 
          console.log(1)
          a();
      }, 0)
    
      function a() { 
          setTimeout(function func2() { 
              console.log(2)
          }, 0)
          console.log(3)
      }
    
      a();
    
      console.log(4)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20230521/d47574e66cd747deab8d37f55f190cf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230521/106f6b9788a7483197f9953d8ccfc1ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230521/c33914c4cf8d49d992f05e1591426445.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230521/8f38b20df5fa4eff9d12643a53508664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230521/70d8d054fca74bbe89dee729688711bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230521/ec3feb6e337c4faba4f2132c597d6da3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20230521/606b755ab6e145fe8d811ef826445aab.png
[MutationObserver]: https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20230521/7c4d3c1d7fdc42549d5ebf43f57cc589.png