js的执行顺序

前几天一个前端的朋友拿出来一道题，特别有意思，随意改动一下就会有意想不到的结果，答错两次之后，发现自己在js执行顺序的掌握上还是有所欠缺。研究了几天，总算是明白了，在此特别感谢简书上的一篇文章，讲的很详细，让我有种恍然大悟的感觉。文章最后会把文章链接附上。

故事是从一道题开始的

async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2 () { console.log('async2'); } console.log('script start'); setTimeout(function () { console.log('setTimeout') },0) async1(); new Promise(function(resolve){ console.log('promise1') resolve() }) console.log('script end')

公布答案

/* script start async1 start async2 promise1 script end async1 end setTimeout */

在原来的题目上改动一下，如下代码

async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2 () { console.log('async2'); } console.log('script start'); setTimeout(function () { console.log('setTimeout') },0) async1(); new Promise(function(resolve){ console.log('promise1') resolve() }).then(function(){ console.log('promise2') }) console.log('script end')

公布答案

/* script start async1 start async2 promise1 script end async1 end promise2 setTimeout */

再改动一下，如下代码

async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2 () { console.log('async2'); } console.log('script start'); setTimeout(function () { console.log('setTimeout') },0) async1(); new Promise(function(resolve){ console.log('promise1') resolve() }).then(function(){ console.log('promise2') }).then(function(){ console.log('promise3') }) console.log('script end')

公布答案

/* script start async1 start async2 promise1 script end async1 end promise2 promise3 setTimeout */

再改动一下，如下代码

async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2 () { console.log('async2'); } console.log('script start'); setTimeout(function () { console.log('setTimeout') },0) new Promise(function(resolve){ console.log('promise1') resolve() }).then(function(){ console.log('promise2') }).then(function(){ console.log('promise3') }) async1(); console.log('script end')

公布答案

/* script start promise1 async1 start async2 script end promise2 async1 end promise3 setTimeout */

经过这好几次改动后，依然能把顺序答对，那么恭喜你，对js的执行顺序已经基本掌握了。 下面内容摘抄自 《简书》里 行动派巨人 的 前端干货：JS的执行顺序。

1. 单线程的JavaScript

js是单线程的，基于事件循环，非阻塞IO的。 特点： 处理I／O型的应用，不适合CPU运算密集型的应用。 说明： 事件循环中使用一个事件队列，在每个时间点上，系统只会处理一个事件，即使电脑有多个CPU核心，也无法同时并行的处理多个事件。因此，node.js在I／O型的应用中，给每一个输入输出定义一个回调函数，node.js会自动将其加入到事件轮询的处理队列里，当I／O操作完成后，这个回调函数会被触发，系统会继续处理其他的请求。

然而单线程不应该是自上而下按照顺序执行的吗？下面的代码输出顺序就被打乱了 function fn(){ console.log('start'); setTimeout(()=>{ console.log('setTimeout'); },0); console.log('end'); } fn() // 输出 start end setTimeout

2. JavaScript中的同步异步

js的同步异步是如何实现的? js中包含诸多创建异步的函数如: seTimeout，setInterval，dom事件，ajax，Promise，process.nextTick等函数

因为单线程，所以代码自上而下执行，所有代码被放到执行栈中执行；遇到异步函数将回调函数添加到一个任务队列里面；当执行栈中的代码执行完以后，会去循环任务队列里的函数;将任务队列里的函数放到执行栈中执行;如此往复，称为事件循环; 这样分析，上一段的代码就得到了合理的解释；再来看一下这段代码； function fn() { setTimeout(()=>{ console.log('a'); },0); new Promise((resolve)=>{ console.log('b'); resolve(); }).then(()=>{ console.log('c') }); } fn() // b c a

Promise和async中的立即执行

我们知道Promise中的异步体现在then和catch中，所以写在Promise中的代码是被当做同步任务立即执行的。而在async/await中，在出现await出现之前，其中的代码也是立即执行的。那么出现了await时候发生了什么呢？

await做了什么

从字面意思上看await就是等待，await 等待的是一个表达式，这个表达式的返回值可以是一个promise对象也可以是其他值。

很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。 由于因为async await 本身就是promise+generator的语法糖。所以await后面的代码是microtask。所以对于开始题中的

async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); }

等价于

async function async1() { console.log('async1 start'); Promise.resolve(async2()).then(() => { console.log('async1 end'); }) }

3.宏任务和微任务

两任务在同步异步中处于什么地位？ 两个任务分别处于任务队列中的宏队列与微队列中; 宏队列与微队列组成了任务队列; 任务队列将任务放入执行栈中执行

宏任务：

宏队列，macrotask，也叫tasks。 异步任务的回调会依次进入macro task queue，等待后续被调用， 这些异步任务包括：

setTimeoutsetInterval

微任务：

微队列，microtask，也叫jobs。 异步任务的回调会依次进入micro task queue，等待后续被调用， 这些异步任务包括：

PromiseObject.observe

1、执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）； 2、全局Script代码执行完毕后，执行栈Stack会清空； 3、从微队列中取出位于队首的回调任务，放入执行栈Stack中执行，执行完后微队列长度减1； 4、继续循环取出位于微队列的任务，放入执行栈Stack中执行，以此类推，直到直到把微任务执行完毕。注意，如果在执行微任务的过程中，又产生了微任务，那么会加入到微队列的末尾，也会在这个周期被调用执行； 5、微队列中的所有微任务都执行完毕，此时微队列为空队列，执行栈Stack也为空； 6、取出宏队列中的任务，放入执行栈Stack中执行； 7、执行完毕后，执行栈Stack为空； 8、重复第3-7个步骤；

以上才是一个完整的事件循环

1.首先，事件循环从宏任务(macrotask)队列开始，这个时候，宏任务队列中，只有一个script(整体代码)任务；当遇到任务源(task source)时，则会先分发任务到对应的任务队列中去。

2.然后我们看到首先定义了两个async函数，接着往下看，然后遇到了 console 语句，直接输出 script start。输出之后，script 任务继续往下执行，遇到 setTimeout，其作为一个宏任务源，则会先将其任务分发到对应的队列中

3.script 任务继续往下执行，执行了async1()函数，前面讲过async函数中在await之前的代码是立即执行的，所以会立即输出async1 start。 遇到了await时，会将await后面的表达式执行一遍，所以就紧接着输出async2，然后将await后面的代码也就是console.log(‘async1 end’)加入到microtask中的Promise队列中，接着跳出async1函数来执行后面的代码

4.script任务继续往下执行，遇到Promise实例。由于Promise中的函数是立即执行的，而后续的 .then 则会被分发到 microtask 的 Promise 队列中去。所以会先输出 promise1，然后执行 resolve，将 promise2 分配到对应队列

5.script任务继续往下执行，最后只有一句输出了 script end，至此，全局任务就执行完毕了。 根据上述，每次执行完一个宏任务之后，会去检查是否存在 Microtasks；如果有，则执行 Microtasks 直至清空 Microtask Queue。 因而在script任务执行完毕之后，开始查找清空微任务队列。此时，微任务中， Promise 队列有的两个任务async1 end和promise2，因此按先后顺序输出 async1 end，promise2。当所有的 Microtasks 执行完毕之后，表示第一轮的循环就结束了

6.第二轮循环依旧从宏任务队列开始。此时宏任务中只有一个 setTimeout，取出直接输出即可，至此整个流程结束

来一个稍微复杂点的代码 function fn(){ console.log(1); setTimeout(() => { console.log(2); Promise.resolve().then(() => { console.log(3); }); },0); new Promise((resolve, reject) => { console.log(4); resolve(5); }).then(data => { console.log(data); }); setTimeout(() => { console.log(6); },0); console.log(7); } fn(); // 流程重现

1、执行函数同步语句；

step1 console.log(1);

执行栈： [ console ] 宏任务： [] 微任务： []

打印结果： 1

step2 setTimeout(() => { // 这个回调函数叫做callback1，setTimeout属于宏任务，所以放到宏队列中 console.log(2); Promise.resolve().then(() => { console.log(3) }); });

执行栈： [ setTimeout ] 宏任务： [ callback1 ] 微任务： []

打印结果： 1

step3 new Promise((resolve, reject) => { // 注意，这里是同步执行的 console.log(4); resolve(5) }).then((data) => { // 这个回调函数叫做callback2，promise属于微任务，所以放到微队列中 console.log(data); });

执行栈： [ promise ] 宏任务： [ callback1 ] 微任务： [ callback2 ]

打印结果： 1 4

step4 setTimeout(() => { // 这个回调函数叫做callback3，setTimeout属于宏任务，所以放到宏队列中 console.log(6); })

执行栈： [ setTimeout ] 宏任务： [ callback1 , callback3 ] 微任务： [ callback2 ]

打印结果： 1 4

step5 console.log(7)

执行栈： [ console ] 宏任务： [ callback1 , callback3 ] 微任务： [ callback2 ]

打印结果： 1 4 7

2.同步语句执行完毕，从微队列中依次取出任务执行，直到微队列为空

step6 console.log(data) // 这里data是Promise的成功参数为5

执行栈： [ callback2 ] 宏任务： [ callback1 , callback3 ] 微任务： []

打印结果： 1 4 7 5

3.里微队列中只有一个任务，执行完后开始从宏队列中取任务执行

step7 console.log(2);

执行栈： [ callback1 ] 宏任务： [ callback3 ] 微任务： []

打印结果： 1 4 7 5 2

但是执行callback1的时候遇到另一个Promise,Promise异步执行完毕以后在微队列中又注册了一个callback4函数

step8 Promise.resolve().then(() => { // 这个回调函数叫做callback4，promise属于微任务，所以放到微队列中 console.log(3); });

执行栈： [ Promise ] 宏任务： [ callback3 ] 微任务： [ callback4 ]

打印结果： 1 4 7 5 2

4.取出一个宏任务macrotask执行完毕，然后再去微任务队列microtask queue中依次取出执行

step9 console.log(3)

执行栈： [ callback4 ] 宏任务： [ callback3 ] 微任务： []

打印结果： 1 4 7 5 2 3

5.微队列全部执行完，再去宏队列中取第一个任务执行

step10 console.log(3)

执行栈： [ callback3 ] 宏任务： [] 微任务： []

打印结果： 1 4 7 5 2 3 6

6.以上全部执行完毕，执行栈，宏队列，微队列均为空 执行栈： [] 宏任务： [] 微任务： []

打印结果： 1 4 7 5 2 3 6

再来一段复杂代码 function fn(){ console.log(1); setTimeout(() => { console.log(2); Promise.resolve().then(() => { console.log(3) }); }); new Promise((resolve, reject) => { console.log(4) resolve(5) }).then((data) => { console.log(data); Promise.resolve().then(() => { console.log(6) }).then(() => { console.log(7) setTimeout(() => { console.log(8) }, 0); }); }) setTimeout(() => { console.log(9); }) console.log(10); } fn();

附图