事件循环（Event Loop）

背景

JavaScript是一门单线程非阻塞的脚本语言，单线程意味着，JavaScript代码在执行的任何时候，都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。
在意识到该问题之际，html5新特性中的web worker可以让JavaScript成为一门多线程语言，但实际开发中使用web worker存在着诸多限制。

浏览器的Event Loop

js引擎的过程

同步编程案例

思考一下这段代码的结果？

显然，同步函数是由上至下的执行顺序

异步编程案例

因为setTimeout是异步函数，js执行机制是先将同步函数执行完毕，再执行异步函数

执行栈与事件队列

当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。如下：

当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。 而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。
当脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。这个过程反复进行，直到执行栈中的代码全部执行完毕。

宏任务（macro taks）与微任务（micro task）

在异步函数中，可以细分为两种任务，宏任务与微任务。
宏任务有以下几种：
①I/O
②setTimeout
③setInterval
④setImmediate
⑤requestAnimationFrame

微任务有以下几种：
①process.nextTick
②MutationObserver
③Promise.then catch finally

异步编程案例

当异步函数中同时存在微任务和宏任务的时候，先执行完微任务，再执行宏任务

总结

浏览器中的事件循环机制就是js在执行代码时，由上至下遍历，优先执行同步函数，在遇到异步函数的时候，将该任务放置执行栈；当任务队列中没有同步函数之后便开始执行执行栈中的异步函数，优先执行微任务，后执行宏任务。
js执行顺序： 同步函数 -> 微任务 -> 宏任务