JavaScript的执行顺序
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();
}).then(function() {
console.log('promise2');
});
console.log('script end');
/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/
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等函数
- 因为单线程,所以代码自上而下执行,所有代码被放到
执行栈
中执行; - 遇到异步函数将回调函数添加到一个
任务队列
里面; - 当
执行栈
中的代码执行完以后,会去循环任务队列
里的函数; - 将
任务队列
里的函数放到执行栈
中执行; - 如此往复,称为
事件循环
;
[图片上传失败...(image-5babc5-1559665370997)]
- 这样分析,上一段的代码就得到了合理的解释;
- 再来看一下这段代码:
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,等待后续被调用,
这些异步任务包括:
- setTimeout
- setInterval
- setImmediate (Node独有)
- requestAnimationFrame (浏览器独有)
- I/O
- UI rendering (浏览器独有)
微任务:
微队列,microtask,也叫jobs。
异步任务的回调会依次进入micro task queue,等待后续被调用,
这些异步任务包括:
- process.nextTick (Node独有)
- Promise
- Object.observe
- MutationObserver
- 执行全局Script同步代码,这些同步代码有一些是同步语句,有一些是异步语句(比如setTimeout等);
- 全局Script代码执行完毕后,
执行栈
Stack会清空;- 从
微队列
中取出位于队首的回调任务,放入执行栈
Stack中执行,执行完后微队列
长度减1;- 继续循环取出位于
微队列
的任务,放入执行栈
Stack中执行,以此类推,直到直到把微任务
执行完毕。注意,如果在执行微任务
的过程中,又产生了微任务
,那么会加入到微队列
的末尾,也会在这个周期被调用执行;微队列
中的所有微任务
都执行完毕,此时微队列
为空队列,执行栈
Stack也为空;- 取出
宏队列
中的任务,放入执行栈
Stack中执行;- 执行完毕后,
执行栈
Stack为空;- 重复第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,取出直接输出即可,至此整个流程结束
链接:https://www.jianshu.com/p/62c7d633a879
版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/70.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论