简单理解浏览器的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的运行机制。

转载于:https://www.cnblogs.com/Mr-Tao/p/11055905.html