简述JavaScript事件循环EventLoop

vlambda
2020-06-05

简述JavaScript事件循环EventLoop

JavaScript事件循环，是js运行顺序最基本的机制，本文用简单通俗的语言讲解一下JavaScript事件循环是怎么运行的。希望能对大家理解js 事件循环有所帮助

本文只是帮助理解，用词不会很谨慎，如果在正式场合使用，请自行翻译成高大上的专业词汇。

先上个动态图，简述js事件循环的流程，等看完本文回头再看此图会加深印象：

大家都知道JavaScript是单线程的，代码都在执行栈中执行。那么我写了那么多代码，好多好多，一坨一坨的，哪都是。程序怎么选择执行着一坨坨一堆堆的代码谁先谁后呢。这就需要事件循环来机制来处理了

首先，在这套机制里有这三个东东。执行栈、宏任务、微任务

（还有堆区，用来存对象用的，为了最精简的解释事件循环，文中没有详细解释堆区的作用）

执行栈，是用来执行我们写的代码的，怎么执行本文阐述，只要知道它是执行代码用的就行了

宏任务，可以理解为存放等待执行栈中执行代码用的，它是个队列。先进先出

微任务，和宏任务一样也是存代码用的，等待被执行栈执行的，它也是个队列。

先进先出宏任务和微任务都是存代码的，为啥整俩呢？

为啥整俩，emmm。。。小明你出去

宏任务和微任务区别就是底层如何选择放入执行栈中执行，也就是放入执行栈的规则是不一样的。下面就说说规则是啥。这个规则其实就是JavaScript的时间循环机制（eventLoop）首先什么会被放入宏任务，什么会被放入微任务呢。这个是已经规定好的。

宏任务包括：

主任务（例如一个script标签，在html中一个script标签就是一个宏任务）

setTimeout

setInterval

I/O

UI交互事件

postMessage

MessageChannel

setImmediate(Node.js 环境)

微任务包括：

Promise.then

Object.observe

MutaionObserver

process.nextTick(Node.js 环境)

知道了谁是宏任务谁是微任务，也就是有了原料了，怎么加工呢，

第二，就是机制怎么运转

上图解释：

简述JavaScript事件循环EventLoop 一个js程序（比如一个网页被打开）一开始是酱婶的，为什么只有宏任务有东西。因为开始运行，我们写的代码还没开始执行，底层只能看到我们写的一坨坨代码，也就是主任务。所以一开始，底层会把所有静态主程序怼到宏任务里。等待执行

下面就开始执行了，继续上图

简述JavaScript事件循环EventLoop

宏1被压入执行栈执行，在宏1执行中有可能产生宏任务和微任务，只要产生宏或微，就按照产生的顺序插入到相应的任务队列尾部。

接下来宏1执行完毕，宏1出栈

简述JavaScript事件循环EventLoop

接下来，底层会检查微任务队列中有没有任务。如果有就会执行所有等待执行的微任务

简述JavaScript事件循环EventLoop

在微任务运行过程中也有可能产生微任务和宏任务。一样，只要产生宏或微，就按照产生的顺序插入相应的队尾。

微1执行完毕，出栈，接下来微2会入栈执行，然后是微3入栈执行

简述JavaScript事件循环EventLoop

所有微任务执行完毕，这时才会重新从宏任务队列中选择下一个任务执行，直到所有任务执行完毕

简述JavaScript事件循环EventLoop

到此就是一个事件循环的过程，文中把事件循环的过程极其精简化了，就是为了能有一个整体的认识，提供给进一步学习一个框架，希望对大家有帮助。

要想详细的了解event的过程，向大家介绍一本书，阳波的《JavaScript核心技术开发解密》。里面详细的介绍了事件循环的过程，讲的很明白。书封皮是一只橘红色的狐狸

vlambda博客
学习文章列表