事件循环（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 执行顺序：同步函数 -> 微任务 -> 宏任务