事件循环机制及常见面试题

借鉴:

《Javascript 忍者秘籍》第二版,事件循环篇

面试 | JS 事件循环 event loop 经典面试题含答案 - 知乎 (zhihu.com)

概念

  1. 主栈队列就是一个宏任务,每一个宏任务执行完就会执行宏任务中的微任务,直到微任务全部都执行完,才开始执行下一个宏任务。
  2. JS 中任务的执行顺序优先级是:主栈全局任务(宏任务) > 宏任务中的微任务 > 下一个宏任务。 ,所以 promise(微任务).then() 的执行顺序优先级高于setTimeout定时器。
  3. 不能满目的将 .then 的回调放入微任务队列;因为没有调用 resolve或者reject 之前是不算异步任务完成的, 所以不能将回调随意的放入微任务事件队列
  4. await 是一个让出线程的标志。await 后面的表达式会先执行一遍,将 await 后面的代码加入到 micro task中这个微任务是 promise 队列中微任务,然后就会跳出整个 async 函数来继续执行后面的代码。
  5. process.nextTick 是一个独立于 eventLoop 的任务队列,主栈中的宏任务每一次结束后都是先执行 process.nextTick队列,在执行微任务 promise 的 .then()。
  6. 每一个宏任务和宏任务的微任务执行完后都会对页面 UI 进行渲染
  • 宏任务 macrotask
    • script 整体代码
    • setTimeout
    • setInterval
    • setImmediate
    • I/O
    • ui render
  • 微任务 microtask
    • process.nextTick
    • promise.then
    • await 后面的代码
    • MutationObserver(h5新特性)

为什么 await 后面的代码会进入到promise队列中的微任务?

async/await 只是操作 promise 的语法糖,最后的本质还是promise

复制代码
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')
    })
}

面试题

面试题1

javascript 复制代码
async function async1() {
    console.log('1') // 2
    async2().then(() => {
        console.log('2')
    })
}
async function async2() {
    console.log('3') // 3
}
console.log('4') // 1
setTimeout(function () {
    console.log('5')
}, 0)
async1();
new Promise(function (resolve) {
    console.log('6') // 4
    resolve();
}).then(function () {
    console.log('7')
})
console.log('8') // 5
//4 1 3 6 8 2 7 5

面试题2

javascript 复制代码
setTimeout(() => {
 
    console.log(1);
 
}, 0);
 
async function main1() {
 
    new Promise((resolve, reject) => {
 
        console.log(2);
 
        resolve();
 
    }).then(() => {
 
        console.log(3);
 
    })
 
    await main2();
 
    console.log(7);
 
}
 
function main2() {
 
    console.log(8);
 
}
 
main1();
 
setTimeout(() => {
 
    console.log(10);
 
}, 0);
 
 
 
//  
2
8
3
7
1
10

面试题3

javascript 复制代码
Promise.resolve()
    .then(() => {
        console.log(0);
        return Promise.resolve('4x');
    })
    .then((res) => { console.log(res) })
Promise.resolve().then(() => { console.log(1); })
    .then(() => { console.log(2); }, () => { console.log(2.1) })
    .then(() => { console.log(3); })
    .then(() => { console.log(5); })
    .then(() => { console.log(6); })

    // 0 1 2 3 4x 5 6

面试题4 详解:(1 封私信) 关于promise输出顺序的疑问? - 知乎 (zhihu.com)

javascript 复制代码
new Promise((resolve,reject) => {
    console.log('外部promise')
    resolve()
})
.then(() => {
    console.log('外部第一个then')
    new Promise((resolve,reject) => {
        console.log('内部promise')
        resolve()
    })
    .then(() => {
        console.log('内部第一个then')
        return Promise.resolve()
    })
    .then(() => {
        console.log('内部第二个then')
    })
})
.then(() => {
    console.log('外部第二个then')
})
.then(() => {
    console.log('外部第三个then')
})
.then(() => {
    console.log('外部第四个then')
})	

// 
外部promise
 外部第一个then
 内部promise
内部第一个then
外部第二个then
外部第三个then
 外部第四个then
 内部第二个then

面试题5

javascript 复制代码
// A 任务
setTimeout(() => {
    console.log(1)
}, 20)

// B 任务
setTimeout(() => {
    console.log(2)
}, 0)

// C 任务
setTimeout(() => {
    console.log(3)
}, 10)

// D
setTimeout(() => {
    console.log(5)
}, 10)

console.log(4)
/* 输出
*   4 -> 2-> 3 -> 5 -> 1
*/

面试题6

javascript 复制代码
setTimeout(function () {
    console.log(1)
}, 0);

new Promise(function (resolve, reject) {
    console.log(2)
    for (var i = 0; i < 10000; i++) {
        if (i === 10) {
            console.log(10)
        }
        i == 9999 && resolve();
    }
    console.log(3)
}).then(function () {
    console.log(4)
})
console.log(5);
// 2, 10, 3, 5, 4, 1

面试题7

javascript 复制代码
console.log("start");
setTimeout(() => {
    console.log("children2")
    Promise.resolve().then(() =>{
        console.log("children3")
    })
}, 0)

new Promise(function(resolve, reject){
    console.log("children4")
    setTimeout(function(){
        console.log("children5")
        resolve("children6")
    }, 0)
}).then(res =>{         // flag
    console.log("children7")
    setTimeout(() =>{
        console.log(res)
    }, 0)
})
// start children4 children2 children3  children5  children7 children6

面试题8

这道题的难点在于是 promise2还是 async1 end 先输出。从全局宏任务之上而下执行时 await async2() 后面的代码 console.log('async1 end') 先进入 promise 中的微任务队列,最后.then() 中的console.log('promise2') 再进入到 promise 中的微任务队列。所以再开始下一轮宏任务循环之前先输出了 async1 end 再输出了 promise2。全局中的微任务执行完成开始下一轮宏任务setTimeout 最后输出 setTimeout

javascript 复制代码
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((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

面试题9

首先开始全局下的宏任务依次输出 script start, async1 start, promise1, promise3, script end。其中 await async2();async2().then()的代码先进入到promise的微任务队列,await async2(); 后面的代码再进入到promise的任务队列,console.log('promise4'); 最后进入到 promise 的任务队列。全局下的宏任务结束,开始全局下的微任务,promise 的微任务队列中按照队列的先进先出原则依次输出,promise2,async1 end,promise4。全局微任务结束,开始下一轮的宏任务setTimeout,最终输出 setTimeout

javascript 复制代码
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    new Promise(function (resolve) {
        console.log('promise1');
        resolve();
    }).then(function () {
        console.log('promise2');
    });
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise3');
    resolve();
}).then(function () {
    console.log('promise4');
});
console.log('script end');
//script start, 
// async1 start, 
// promise1, 
// promise3, 
// script end, 
// promise2,
// async1 end,
// promise4, 
// setTimeout

面试题10

javascript 复制代码
async function async1() {
    console.log('async1 start');
    await async2();
    setTimeout(function() {
        console.log('setTimeout1')  // 这一部分代码会放入到 promise 的微任务队列中。
    },0)
}
async function async2() {
    setTimeout(function() {
        console.log('setTimeout2')
    },0)
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout3');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');
// script start, async1 start, promise1, script end,
// promise2, setTimeout3,  setTimeout2, setTimeout1
相关推荐
小桥风满袖几秒前
Three.js-硬要自学系列18 (模型边界线、几何体顶点颜色、网格模型颜色渐变)
前端·css·three.js
JHC000000几秒前
DrissionPage 请求一次换一个代理(不重启chrome)
前端·chrome
旧故新长1 分钟前
MyBatis 类型处理器(TypeHandler)注册与映射机制:JsonListTypeHandler和JsonListTypeHandler注册时机
java·开发语言·mybatis
David凉宸1 分钟前
视频融合 hls流如何对接
前端·音视频开发
萌萌哒草头将军2 分钟前
🚀🚀🚀 神了!RedwoodJS 轻松碾压 NextJS,成了我的最爱❤️
前端·react.js·全栈
CF14年老兵4 分钟前
当 JavaScript 遇上 Rust/Go:一场 “速度诱惑” 下的生态保卫战
前端·javascript·rust
David凉宸4 分钟前
vue手写日历
前端·javascript
itsOli10 分钟前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
梨啊梨b10 分钟前
使用CSS混合模式轻松实现Mp4视频透明背景
前端
前端九哥11 分钟前
🤡什么鬼?两行代码就能适应任何屏幕?
前端