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

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是一个函数，异步是指将来会运行“一个取自事件队列的函数”的函数），当然具体的结构跟具体的实现有关，这里只是做了一个简单的阐述）

• 事件循环： 事件循环就是主线程重复的从消息队列中取出消息，执行的过程。取出一个消息并执行的过程就叫做一次循环。

  异步操作的图示如下：
  

  从图中可以看出：异步过程的回调函数，一定不会在当前这一轮事件循环中执行。 （这里有点迷糊，如果消息队列中只有当前一个异步回调函数的话呢？）

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

参考文章

https://segmentfault.com/a/1190000010292798

https://segmentfault.com/a/1190000004322358

前端相关技术

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