javaScript异步、消息队列、事件循环

你的名字 2022-05-24 02:51 292阅读 0赞

## javaScript异步、消息队列、事件循环 ##

为什么javaScript是单线程？（避免复杂性）

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ 所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征 。

主线程

JS引擎中负责解释和执行JavaScript代码的线程只有一个，就叫做**主线程**，实际上还有其它的线程，例如处理AJAX请求的线程、处理DOM事件的线程、定时器线程等等给他叫做工作线程。

异步的实现

*  主线程发起一个异步请求，相应的工作线程接收请求并告知主线程已收到(异步函数返回)；
 *  主线程可以继续执行后面的代码，同时工作线程执行异步任务；
 *  工作线程完成工作后，通知主线程；
 *  主线程收到通知后，执行一定的动作(调用回调函数)。
    
    最常用的DOM事件就是异步行为，例如有如下代码：
    
        var button = document.getElement('#btn');
        button.addEventListener('click', function(e) { 
         console.log('按钮');
        });
    
    从事件的角度来看，上述代码表示：在按钮上添加了一个鼠标单击事件的事件监听器；当用户点击按钮时，鼠标单击事件触发，事件监听器函数被调用。
    
    从异步过程的角度看，addEventListener函数就是异步过程的发起函数，事件监听函数就是异步过程的回调函数。 事件触发时，表示异步任务完成，会将事件监听器函数封装成一条消息放到消息队列中，等待主线程执行。

任务队列（消息队列）和事件循环

异步过程中，工作线程在异步操作完成以后需要通知主线程，**通知机制**是通过消息队列和事件循环来实现的。

一句话概括：工作线程将消息放入到消息队列，主线程通过时间循环过程去取消息。

*  **消息队列** ：是一个先进先出队列，里面存放这各种消息。（消息队列里面存放的东西，可以暂时性理解为就是我们注册的回掉函数（回调和异步过程的回调有区别，回调一般是传入到一个函数的函数，比如A(B)，前提是B是一个函数，异步是指将来会运行“一个取自事件队列的函数”的函数），当然具体的结构跟具体的实现有关，这里只是做了一个简单的阐述）
 *  **事件循环：** 事件循环就是主线程重复的从消息队列中取出消息，执行的过程。取出一个消息并执行的过程就叫做一次循环。
    
    异步操作的图示如下：  
    ![这里写图片描述][70]
    
    从图中可以看出：**异步过程的回调函数，一定不会在当前这一轮事件循环中执行。** （这里有点迷糊，如果消息队列中只有当前一个异步回调函数的话呢？）

执行栈  
**执行栈是一种数据结构** ，记录我们在程序中的位置，如果调用一个函数，则先将当前函数入栈，如果没有涉及到异步操作，那么直接执行完成以后将函数弹出，否则遇到了异步操作，则调用其它的模块执行代码，并且将回调函数放入到消息队列中（任务队列）等待执行。一旦执行栈为空，也就是代码执行完成后，就检查消息队列（这个过程也就是事件循环），看是否有任务执行，将消息队列的队首任务推入到执行栈中执行。

参考文章

[https://segmentfault.com/a/1190000010292798][https_segmentfault.com_a_1190000010292798]

[https://segmentfault.com/a/1190000004322358][https_segmentfault.com_a_1190000004322358]

前端相关技术

javaScript异步、消息队列、事件循环

[70]: /images/20220524/38eef7974f934bd081b10f6b42620193.png
[https_segmentfault.com_a_1190000010292798]: https://segmentfault.com/a/1190000010292798
[https_segmentfault.com_a_1190000004322358]: https://segmentfault.com/a/1190000004322358