叨叨几句
上篇通过几个由浅入深的例子了解了如何处理异步任务。这一篇深入理解异步概念中的 任务队列、事件循环、宏任务、微任务等。
开始之前还要重复强调一点就是：JavaScript 是单线程的，也就是无法同一时候运行多段代码。
至于为何这样设计，也许是作者“任性”，或者是考虑到 JavaScript 作为浏览器脚本语言，主要用途是与用户互动，如果是多线程，那么势必会带来复杂的同步问题。
先看两段代码
题1.
setTimeout(() => {
console.log("1");
}, 0);
while (true) {}
console.log("2");
执行结果是什么都不会输出
题2.
setTimeout(() => {
console.log("1");
}, 0);
console.log("2");
执行结果为打印 2 1
给出答案并不难，但是如果问你其中原理，亦或是题目更加复杂，你还能轻松应对么？
想知道上面的代码为什么会这样执行，就要引出一个概念：任务队列
任务队列
把需要执行的代码看成一个个任务，然后把这些任务分成两种，同步任务(sknchronous)，异步任务(asynchronous)。
- 同步任务：当前主线程将要执行的任务，这些任务形成了同步任务执行栈
- 异步任务：即不会马上执行的任务，异步任务不进入主线程，而是进入任务队列
执行顺序是这样的，主线程依次执行每个任务，当遇到异步任务时，异步任务会被依次放入任务队列，然后继续执行同步任务。
当我们所说的同步任务执行栈里的任务都被执行完后，执行栈清空了，主线程空闲，这时将执行任务队列中的任务。
主线程从任务队列中读取事件，这个过程是循环不断的直到任务队列也被清空，这个运行机制叫做“Event Loop”（事件循环或者叫事件轮询）。
这样的机制带来的最大好处就是，虽然 Javascript 是单线程的，但对于一些耗时的任务，可以将其丢到任务队列中，保证其他不耗时的同步代码先执行。
再看题1，程序由上至下依次执行，当看到 setTimeout 时会将其内容放入任务队列，然后继续向下执行，很明显while循环是一个死循环，不会终止，那么主线程也就不会空闲，不会继续执行下面的console.log("2")，当然也就不会找到任务队列执行里面的逻辑。
使用 setTimeout 时需要注意的一点是，定时器的定时不一定就是准的，这个例子中如果将死循环改为一个非常复杂或者耗时的运算，那么就算定时器的延时为0，也不一定马上执行，必须等待这个耗时的循环执行完毕（执行栈被清空），才会执行 setTimeout 的代码，所以 setTimeout 有些时候并不是可靠的。
再看题2，看到 setTimeout 将里面的内容放到任务队列中，然后继续执行下面的console.log("2")，打印出2，然后执行栈被清空，主线程空闲，这时找到任务队列，任务队列中的定时器延时为0，所以立即执行里面的 console.log("1") ，所以最后执行结果为打印 2 1。
关于 setTimeout 还有一个不可忽视的细节，最小延迟时间。
看一段代码：
setTimeout(() => {
console.log("1");
}, 100);
setTimeout(() => {
console.log("2");
}, 0);
经过上面的总结，得出输出顺序为 2 1，应该很容易了。
如果将延迟时间修改一下，如：
setTimeout(() => {
console.log("1");
}, 1);
setTimeout(() => {
console.log("2");
}, 0);
按照上面讲的一堆理论，可以得出输出顺序还是 2 1，但是你可以在控制台中实验一下，结果为 1 2。
不要慌，造成这个现象的原因是定时器由最小延迟时间，也就是说在一个特别小的延迟时间内，一律按照0处理，在代码顺序上谁靠前，谁就先会在主线程空闲时优先被执行。因此延迟时间为1的定时器先执行。
最小延迟时间的值是根据浏览器引擎来定的，chrome 的最小延迟时间是1ms。
宏任务 VS 微任务
说出下面代码的输出顺序
console.log("1");
setTimeout(() => {
console.log("2");
}, 0);
new Promise((resolve, reject) => {
console.log("3");
resolve();
}).then(() => {
console.log("4");
});
console.log("5");
代码分析：
- 首先同步输出1没有疑问；
- 然后遇到 setTimeout 的回调放入任务队列；
- 然后遇到 Promise 输出3（promise内的代码是同步的，完成处理函数是基于异步的），同时将 promise then 完成处理函数逻辑放入任务队列；
- 同步输出5；
- 然后再去任务队列执行，依次输出2 和 4；
由此我们知道输出结果应该为： 1 3 5 2 4
但出乎意料，实际运行结果为： 1 3 5 4 2
对于挑出异步任务放到任务队列这个操作应该没有疑问，问题所在就是两个任务队列中的任务执行顺序，是先输出2还是先输出4。
想要解出这道题，又要引出两个概念，宏任务 && 微任务
任务队列中的异步任务其实又分为：宏任务（macrotask）与微任务（microtask），也就是说宏任务和微任务虽然都是异步任务，都在任务队列中，但是他们却分成两列。
那宏任务和微任务如何区分呢？
一般地宏任务包括：
- setTimeout
- setInterval
- I / O
- 事件
- postMessage
- setImmediate(Node.js，浏览器端该 API 已经废弃)
- requestAnimationFrame
- UI 渲染
微任务包括：
- Promise.then
- MutationObserver
- process.nextTick(Node.js)
（只需要记住三种微任务，其他都是宏任务啦）
如示例中那样，setTimeout 是宏任务，promise.then 是微任务，当在任务队列中同时存在宏任务和微任务时，执行顺序是怎样的呢？
答案是：当主线程执行栈为空时，引擎会优先处理任务队列中的微任务列，处理完微任务列中的所有任务，再去处理宏任务列。
这样继续分析上面的示例代码，不论 setTimeout 和 promise.then 谁先进入任务队列，因为微任务的优先级高于宏任务，所以一定会先执行 promise.then 然后 再执行 setTimeout 。因此输出结果应该为 1 3 5 4 2 。
一个更加复杂的示例：
console.log("1");
const foo = () =>
new Promise((resolve, reject) => {
console.log("2");
let promise1 = new Promise((resolve, reject) => {
console.log("3");
setTimeout(() => {
console.log("4");
}, 0);
resolve("5");
});
resolve("6");
promise1.then(arg => {
console.log(arg);
});
});
foo().then(arg => {
console.log(arg);
});
console.log("7");
代码分析：
- 首先执行第一句 console.log，同步输出 1；
- 执行 foo 函数，同步输出 2；
- 继续执行 foo 函数，遇见 promise1，执行 promise1 构造函数，同步输出 3；
- 遇到 setTimeout 将回调放入任务队列（==宏任务1==）；
- 遇到 promise1 的成功处理函数，放入任务队列（==微任务1==）；
- 遇到外层匿名 promise 的成功处理函数，放入任务队列（==微任务2==）；
- 执行到最后一行，同步输出 7；
- 至此已知的输出是 1 2 3 7；
- 再来分析任务队列中的执行；
- 由微任务优先级高于宏任务可知，先执行 promise1.then 输出 5；
- 再执行 外层匿名promise.then 输出 6；
- 此时微任务队列已经执行完毕，开始处理宏任务队列，宏任务队列只有一个 setTimeout 的回调，输出 4；
完整的输出顺序是：1 2 3 7 5 6 4
一道头条面试题
这道题有些刁钻，考察的细节点也很多。
async function async1() {
console.log("async1 start"); // 2
await async2();
console.log("async1 end"); // 6
}
async function async2() {
console.log("async2"); // 3
}
console.log("script start"); // 1
setTimeout(function() {
console.log("setTimeout"); // 8
}, 0);
async1();
new Promise(function(resolve) {
console.log("promise1"); // 4
resolve();
}).then(function() {
console.log("promise2"); // 7
});
console.log("script end"); // 5
解开这道题的前提是了解 async/await 的用法，你必须知道：
- async 声明的函数，其返回值必定是 promise 对象，如没有显式返回 promise 对象，会隐式转换，在返回结果外套上 Promise.resolve()，保证返回值为 promise 类型
- 遇到 await 时，执行 await 右侧的逻辑，，但注意这里会中断执行 await 下面的逻辑，因为之前说过，async 声明的函数返回值必定是 promise 对象。所以说 await 下面的逻辑相当于是promise.then里的内容。
如果文字描述不清除，可以看下面两段代码。
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
上面的代码，等同于下面的
async function async1() {
console.log("async1 start");
new Promise((resolve, reject) => {
console.log("async2");
resolve();
}).then(() => {
console.log("async1 end");
});
}
这些你都了解了，就可以尝试解出这道题了。
代码分析：
- 由上至下，运行至console.log("script start"); 同步输出 script start；
- 遇到 setTimeout 将其放入任务队列（==宏任务1==）；
- 执行 async1 函数，**同步输出 async1 start **， 遇到 await 执行右侧逻辑——执行 async2 函数；
- 在 async2 函数中同步输出 async2 ，注意此时 async2 函数执行完毕，但是 async 声明的函数一定会返回 promise 对象，并且 await 中断了 async1 函数中的后续操作，其后续操作相当于放入了 async2 函数返回的 promise 的 then 方法中，因此 console.log("async1 end"); 放入任务队列（==微任务1==）；
- 代码执行至匿名的 promise，同步输出 promise1，并且将 then 逻辑放入任务队列（==微任务2==）；
- 同步输出 script end；
- 至此同步任务均执行完毕，轮询任务队列，优先读取微任务，执行微任务1中 输出 async1 end；
- 执行微任务2， 输出 promise2；
- 微任务执行完毕，执行宏任务1，输出 setTimeout；
完整的顺序是： script start > async1 start > async2 > promise1 > script end > async1 end > promise2 > setTimeout
补充
遗漏了一个 promise 的知识点：
当一个 promise.then 方法中返回一个 promise ，那么这个新返回的 promise.then 的优先级高于外层 promise 的第二个 then 方法。
完结
掌握好理论基础知识，不论题出的多么刁钻，都可以见招拆招。
学好异步的目的不只是做出面试题，更重要的是在开发中合理运用，并且能准确快速的定位问题。
网友评论