聊聊前端面试之输出顺序

春节后，新一轮跳槽风暴不知道能否吹暖今冬的裁员寒冬。然而，职场现状就是越来越多的小公司也在效仿各大互联网牛场面试要求，对于底层知识要求越来越深，管他用着用不着的，先面了再说。本篇跟大家聊聊面试常见题型之显示顺序问题。

注：本篇分析为在浏览器环境中 排序 显示。

Nodejs编程是全异步，事件引擎为libuv。

一、JavaScript运行机制

二、任务的阶级斗争

JavaScript任务运行机制图

第一阶级：同步任务

1、皇帝豪饮两碗鹿血，问有个叫EventLoop的公公，今晚谁来陪睡，EventLoop掐指一算，正宫几个“同步任务“娘娘都送过礼，我就按照送礼顺序来给她们安排吧。

同步任务优先执行，先进先出。

第二阶级：异步任务（微任务）

2、几晚过后，所有送过礼的“同步任务”娘娘轮流服侍皇帝一遍。如此同时，秀宫的宫女们忙着化妆整容。原来，宫里有个不成文的规定，只有收拾好自己的宫女才可以排队等待皇帝的召唤，到时候公公EventLoop会按照排队次序向皇帝安排服侍。

3、什么时候才轮到宫女们服侍呢？是“同步任务”娘娘们服侍一遍后，毕竟公公EventLoop为了保护自己的饭碗，得让皇帝不断尝鲜。

同步任务执行的同时，异步任务在事件栈完成后，异步任务进入“任务队列”；

事件循环（Event Loop）驱使主线程在全部同步任务完成后，从“任务队列”读取事件，如此不断循环；

任务队列执行先进先出；

第三阶级：异步任务--定时器（宏任务）

三、案例分析

基于今日头条的面试题改造

async function async1() {
    console.log(1)
    await async2()
    console.log(2)
    return await 3
}
async function async2() {
    console.log(4)
}

setTimeout(function() {
    console.log(5)
}, 0)

async1().then(v => console.log(v))
new Promise(function(resolve) {
    console.log(6)
    resolve();
    console.log(7)
}).then(function() {
    console.log(8)
})
console.log(9)复制代码

• 从代码第一行开始，异步函数async1、async2构建完未执行。
• 按照代码顺序，首先该执行的应该是 setTimeout ，怎奈又不是正宫，长得又不秀丽，只能在任务队列最后等着。
• 运行到 async1.then() 时，async1返回一个 Promise 对象(异步函数其实是封装的 Promise.resolve() ， Promise 对象是一个构造函数），所以在执行async1时，首先将非resolve、reject函数加入主线程，上题中首先执行 console.log(1) 和 await async2

  ，

  输出 1,4 。感觉await挺孙子的，执行完自己的函数就跳出来 async

  函数。

• 继续看，异步函数async1的then执行这个时候进入事件栈，因为还在等待异步函数async1返回值，等着吧。
• 继续向下执行遇到真正的 Promise 对象了，二话不说，执行下先， console.log(6) 、 console.log(7) 直接加入到主线程，输出 6,7 。同时将异步函数console.log(8)放在储秀宫，虽然属于第二阶级，起码还是第二阶级的老大么。

• 单纯的console.log(9)说，咱也是第一阶级的，虽然最后一位，侍架一晚，输出了

  9

  。

• 同步人物结束了，Event Loop开始召唤任务队列，console.log(8)说我是秀女中的第一位，好，就你了。于是，生出了 8 。
• setTimeout翘首以盼，谁知，执行完本轮又跳到到异步函数async1，率先看到了 console.log(2） ,所以输出了 2 。
• 紧接着，又遇到了 await 了，还好，结束了，返回的值扔给了 async 的异步函数，得到了值，抓紧时间执行，得到结果了，终于可以进入任务队列，这时主线程也是空的，执行下结果吧，输出了 3 。
• 所有微任务结束了，该宏任务大展拳脚了，setTimeout输出了值， 5 。

以上试题分析完毕，输出结果顺序为： 1,4,6,7,9,8,2,3,5 。

四、最后

以上是个人对于任务执行顺序的理解，如理解有误，希望大神多多指教。