前言

还记得那些年面试官问你的定时器的原理吗?还有呢?Promise的原理呢?原理、原理、原理,问的我们怀疑人生。

为了下次不再懵逼,今天,我们来了解一下Event Loop的概念。我们的初衷是真正的了解和掌握它,了解整体JavaScript的运行机制。至少,我们在看完文章的时候,不会让我们在怀疑人生了。如果你喜欢我的文章,欢迎评论,欢迎Star~。欢迎关注我的github博客

正文

聊这一个话题,我们必须从JavaScript本身聊起。

为什么浏览器选择了我

众所周知,JavaScript是一门单线程语言。为什么会在浏览器端开发一门这样子的单线程原因呢?原因就是——简单。在浏览器端,复杂的UI环境会限制多线程语言的开发。例如,一个线程在操作一个DOM元素时,另一个线程需要去删除DOM元素,这个之间就需要进行状态的同步,何况前端可能不止操作这么一个DOM元素。所以,为了避免在开发过程中,去进行复杂的同步,选用单线程语言进行开发是最好的解决方案。

但是,单线程语言也会有问题——同步阻塞。举个例子,cpu在执行程序的过程中,执行到IO操作,它会发送IO请求,之后等待数据返回,待数据返回之后才会继续执行后面的任务,如图。
image

这种问题在浏览器中,或许是致命的。因此,JavaScript在执行过程中,将任务分为同步任务和异步任务。

同步和异步的我

首先,我们来了解一下主线程的执行栈(call stack)。一个线程对应着一个执行栈,所有同步任务都会被放入到执行栈中执行,例如,我们有下面这样子的一个程序:

function fun1(){
  return 'hello hip-hop';
}

function fun2(){
  return fun1();
}

function fun3(){
  console.log(fun2());
}

fun3();   //'hello hip-hop'

调用栈执行过程:

image

或者我们使用另一种方法来论证一下:我们将fun1改成throw new Error('hello hip-hop')

function fun1(){
  throw new Error('hello hip-hop');
}

function fun2(){
  return fun1();
}

function fun3(){
  console.log(fun2());
}

fun3();

image

每次调用过程中,会有函数的出栈和入栈。这就是同步任务执行的过程,一个任务执行完成之后,执行下一个任务。那么,我们在来看一下另外一个例子:

console.log('first');
setTimeout(() => {
  console.log('second');
}, 500);
console.log('three');

我们依旧来看一下这个程序的调用栈的执行顺序:

image

从图中,我们可以看到setTimeout执行完成之后,已经出栈了,但是后来的console.log('second')又是如何入栈的呢?

其实,在主线程之外,还有一个任务队列。在任务队列中,会存放着异步任务,只有当指定事件发生之后,异步任务才会被放到主线程中执行。

其实,任务队列中是一个事件队列,那setTimeout举例来说,当主线程执行setTimeout的时候,会创建一个定时器,一旦定时器的时间达到了,就会将其内部的回调函数,放入任务队列中。然后,主线程在执行的最后去循环任务队列。而回调函数,指的是主线程挂起的代码,异步任务必须有回调函数才能执行接下来的操作。如图:

image

事件循环

其实,上图中,我们可以看到一个循环,如图:

image

这是一个死循环,无论哪种情况都是闭环。其实,这就是事件循环。事件循环会不断地去检测任务队列中是否还有已触发时间的任务,如果有的话,就放入主线程中执行。但是事件循环一般会在主线程中任务执行完成之后执行。我们可以来看一下另一幅图片:

image

这幅图片中,我们可以看到完整的执行流程,其中涉及到的异步事件有DOM事件、ajax请求和setTimeout。所以,整体的执行流程是这样子的:

(1)、所有同步任务会在主线程的调用栈中执行。
(2)、在主线程之外,还有一个任务队列,一旦指定事件发生之后,异步任务就会被放入任务队列中
(3)、当主线程执行完调用栈中的同步任务时,会遍历任务队列,将任务队列中的任务放入主线程中执行。而之后事件循环一直会去遍历任务队列,一旦有任务放入就会放入主线程中执行。

这样,我们就已经初步了解了同步和异步之间的实现,以及浏览器中的事件循环机制。

任务队列的不同

自从ES6标准出来之后,Promise就被开发者关注到了。Promise是个很有意思的家伙,详细讲解的话,篇幅会太长。我们只关注它异步方面的任务队列。

首先,我们来看一段程序:

setTimeout(() => {
  console.log(1);
}, 0);

Promise.resolve().then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
});

console.log(4);      // 4   2    3    1

你会对它的输出感到疑惑吗?相信经历过面试的你一定会?还是两个字——懵逼

其实,这个执行顺序和任务队列的种类有关系。我们一般一直称呼地任务队列(task queue),其实指的是Macrotasks。而Promise执行后会被放到Microtasks中。

Macrotasks => 一般会将dom事件、ajax事件和setTimeout放入到这个队列中。

Microtasks => 一般会将Promise、process.nextTicks、MutationObserver放入这个队列中。

在执行事件循环时,主线程会首先遍历Microtasks,然后将队列中的异步任务抽取出来执行,直至抽空整个队列,才会去执行Macrotasks的队列中的异步任务。

所以,上面函数的调用栈过程如下:

image

总结

js的事件循环部分,内容应该算是全部阐述完全了。希望对看的你,会有收获。

如果你对我写的有疑问,可以评论,如我写的有错误,欢迎指正。你喜欢我的博客,请给我关注Star~呦


zimo
2.2k 声望167 粉丝

no regrets yesterday, more struggling today, looking forward to tomorrow