简单理解浏览器的event loop 和 JavaScript的同步异步

为何JavaScript是单线程的?

JavaScript的主要用途是和用户进行交互以及对DOM的操做,为了不复杂的同步问题(若是多线程,A线程对某DOM添加内容,B线程对它又进行了删除操做,这每每会产生问题),JavaScript在一诞生之际就是单线程,这已是这门语言的核心特征,如今和未来都不会改变。

如何保证单线程内的任务执行起来更合理?

单线程就意味着，全部任务须要排队，前一个任务结束，才会执行后一个任务。若是前一个任务耗时很长，后一个任务就不得不一直等着。因而就有一个概念，任务队列。

若是排队是由于计算量大，CPU忙不过来，倒也算了，可是不少时候CPU是闲着的，由于IO设备（输入输出设备）很慢（好比Ajax操做从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程彻底能够无论IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回告终果，再回过头，把挂起的任务继续执行下去。

同步异步任务出现了!

因而，全部任务能够分红两种，一种是同步任务（synchronous），另外一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务能够执行了，该任务才会进入主线程执行。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。  

"任务队列"是一个事件的队列（也能够理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务能够进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

"任务队列"中的事件，除了IO设备的事件之外，还包括一些用户产生的事件（好比鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。可是，因为存在后文提到的"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能进入主线程。

同步和异步

---

当主线程在运行的时候，会产生堆（heap）和栈（stack）,栈中的是同步任务,堆中的则是异步任务,只有栈中的同步任务执行完毕以后,主线程才会去堆中执行异步事件,执行顺序是按照"先入先出"的原则。

同步

若是在函数返回结果的时候，调用者可以拿到预期的结果(就是函数计算的结果)，那么这个函数就是同步的.

console.log('我要作第一件事情');
console.log('我要作第二件事情');

若是函数是同步的，即便调用函数执行任务比较耗时，也会一致等待直到获得执行结果。以下面的代码：

console.log('我要作第一件事情');
setTimeout(function () {
  console.log('我忽然有事,晚点再作第二件事情');
},1000)
console.log('我要作第三件事情');

这段代码的实现就叫作异步,也就是说不彻底按照顺序去作,
突发状况,第二件事情不能马上完成,因此等待一段时间再去完成,
优先去作后面的第三件事情,这样就不耽搁时间。

异步

若是在函数返回的时候，调用者还不能购获得预期结果，而是未来经过必定的手段获得（例如回调函数），这就是异步。例如ajax操做。 
若是函数是异步的，发出调用以后，立刻返回，可是不会立刻返回预期结果。调用者没必要主动等待，当被调用者获得结果以后会经过回调函数主动通知调用者。

栗子:

console.log("I am No.1");
setTimeout(function(){
   console.log("I am NO.2");
},0)
setTimeout(function(){
   console.log("I am NO.3");
},0)
console.log("I am No.4");

输出结果是:

I am No.1;
I am No.4;
I am NO.2;
I am NO.3;

执行过程图解:

理解了这些,相信你应该对Event Loop能够有一个初步的了解。

---

 

Event Loop

---

理解到这里就能够引入Event Loop(事件循环)的概念了,正是由于主线程不断的去任务队列(task queue)中读取事件,因此才有了事件的不断循环,也就是说当前主线程中的同步事件执行完毕后,主线程才会去任务队列中读取异步事件,并且这个过程会一直重复下去,这就是事件循环。

上文讲到，异步过程当中，工做线程在异步操做完成后须要通知主线程。那么这个通知机制是怎样实现的呢？答案是利用消息队列和事件循环。用一句话归纳：

工做线程将消息放到消息队列，主线程经过事件循环过程去取消息。

• 消息队列：消息队列是一个先进先出的队列，它里面存放着各类消息。
• 事件循环：事件循环就是主线程重复的从消息队列中取出消息，执行的过程。取出一个消息并执行的过程就叫作一次循环。

实际上，主线程只会作一件事情，就是从消息队列里面取消息、执行消息，再取消息、再执行。当消息队列为空时，就会等待直到消息队列变成非空。并且主线程只有在将当前的消息执行完成后，才会去取下一个消息。这种机制就叫作事件循环机制，取一个消息并执行的过程叫作一次循环 

事件循环执行机制以下：

（1）全部同步任务都在主线程上执行，造成一个执行栈（execution context stack）。

（2）主线程以外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的全部同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，因而结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

 

主线程在执行完当前循环中的全部代码后，就会到消息队列取出这条消息，并执行它。到此为止，就完成了工做线程对主线程的通知，回调函数也就获得了执行。若是一开始主线程就没有提供回调函数，AJAX线程在收到HTTP响应后，也就不必通知主线程，从而也不必往消息队列放消息。如图👇

主线程从任务队列中读取事件，这个过程是循环不断的，因此整个的这种运行机制又称为Event Loop（事件循环）。

 小结

JS是单线程， 主线程执行同步代码， 事件、I/O操做等异步任务，将会进入任务队列执行，异步执行有结果以后，就会变为等待状态， 造成一个先进先出的执行栈，主线程的同步代码执行完以后，再从”任务队列”中读取事件， 执行事件异步任务的回调。 这就是为何执行顺序是， 同步 > 异步 > 回调 更简单的说：只要主线程空了（同步），就会去读取”任务队列”（异步），这就是JavaScript的运行机制。