JS运行机制

[licong96]

JS执行

当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是，传递给 JavaScript 引擎，并且要求它去执行。

在 ES3 和更早的版本中，JavaScript 本身还没有异步执行代码的能力，这也就意味着，宿主环境传递给 JavaScript 引擎一段代码，引擎就把代码直接顺次执行了，这个任务也就是宿主发起的任务。

但是，在 ES5 之后，JavaScript 引入了 Promise，这样，不需要浏览器的安排，JavaScript 引擎本身也可以发起任务了。采纳 JSC 引擎的术语，我们把宿主发起的任务称为宏观任务，把 JavaScript 引擎发起的任务称为微观任务。

每次的执行过程，其实都是一个宏观任务。我们可以大概理解：宏观任务的队列就相当于事件循环。
在宏观任务中，JavaScript 的 Promise 还会产生异步代码，JavaScript 必须保证这些异步代码在一个宏观任务中完成，因此，每个宏观任务中又包含了一个微观任务队列。

分析执行顺序

1. 首先我们分析有多少个宏任务；
2. 在每个宏任务中，分析有多少个微任务；
3. 根据调用次序，确定宏任务中的微任务执行次序；
4. 根据宏任务的触发规则和调用次序，确定宏任务的执行次序；
5. 确定整个顺序。

Event loop（事件循环）

1. 在执行栈中执行一个宏观任务。
2. 遇到同步代码直接执行，遇到异步代码，进行区分宏观任务和微观任务，添加到对应的任务队列中。
3. 当前宏观任务执行完毕后，立即执行下面的所有微观任务。（微观任务中优先级高的先执行）
4. 微观任务全部执行完毕后，GUI接管渲染。
5. 继续从任务队列中查找下一个宏观任务。

macro-task(宏任务)

宿主环境发起的任务。

• 整体代码script
• setTimeout & setInterval
• I/O

micro-task(微任务)

JS引擎发起的任务。

• Promise
• process.nextTick
• Object.observe
• MutationObserver

Promise

Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。

Promise本身是同步的立即执行函数 new Promise直接执行。then后面的函数被分发到微任务Event Queue中。
如果俩个微任务的优先级相同，那么任务队列自上而下执行，但是Promise的优先级高于async，所以先执行Promise后面的回调函数。

async/await

async/await 是 ES2016 新加入的特性。
async 函数必定返回 Promise，我们把所有返回 Promise 的函数都可以认为是异步函数。
async 函数是一种特殊语法，特征是在 function 关键字之前加上 async 关键字，这样，就定义了一个 async 函数，我们可以在其中使用 await 来等待一个 Promise。

async 函数强大之处在于，它是可以嵌套的。我们在定义了一批原子操作的情况下，可以利用 async 函数组合出新的 async 函数。

generator/iterator

此外，generator/iterator 也常常被跟异步一起来讲，我们必须说明 generator/iterator 并非异步代码，只是在缺少 async/await 的时候，一些框架（最著名的要数 co）使用这样的特性来模拟 async/await。
但是 generator 并非被设计成实现异步，所以有了 async/await 之后，generator/iterator 来模拟异步的方法应该被废弃。

setTimeout的执行

这段代码什么意思？

 setTimeout(function() {
    console.log('执行')
 }, 3000)    

解释是:：3秒后，setTimeout里的函数被会推入Event Queue，而Event Queue里的任务，只有在主线程空闲时才会执行。

所以只有满足这两个条件： (1)3秒后；(2)主线程空闲。才会执行该函数。

如果主线程执行内容很多，执行时间超过3秒，假如执行了4秒，那么这个函数只能在4秒后执行。