前端的事件循环EventLoop
2023-12-21 16:00:47
前端的事件循环EventLoop
先看一个题目:
setTimeout(() => {
console.log(1);
}, 1000)
const a = new Promise((resolve) => {
console.log(2);
setTimeout(() => {
console.log(3);
resolve()
}, 1000)
})
a.then(res => {
console.log(4);
})
console.log(5);
Promise.resolve().then(res => {
console.log(6);
setTimeout(() => {
console.log(7);
})
console.log(8);
})
console.log(9);
js是单线程
既然js是单线程,那就不能同时执行多个任务,只能将任务排队执行,
如果有个任务耗时比较多(比如ajax),这种情况后面的任务都会被阻塞
为了防止这种情况,js将任务分为同步任务和异步任务去执行
同步任务放入主栈中执行,异步任务放入任务队列中执行
任务队列可分为两个队列:宏任务和微任务
● 宏任务队列: ajax、setTimeout、setInterval、Dom监听、requestAnimationFrame等
● 微任务队列: Promise的then回调、 Mutation Observer、 Object.observe
微任务的执行优先级大于宏任务优先级
js任务执行过程:
- 按顺序执行主栈中所有同步任务,遇到异步任务先跳过,将异步任务放入任务队列
- 所有同步任务执行完成后,观察任务队列中是否已经有结果的任务,执行任务队列中可执行的任务
- 优先执行微任务队列中的任务,微任务队列中所有可执行的任务执行完毕后,观察宏任务队列中是否有可执行的任务
- 执行宏任务,若宏任务执行的过程中,又有微任务可执行,则微任务插队执行
- 重复上述过程
async function async1() {
console.log('1');
await async2();
console.log('2');
}
async function async2() {
console.log('3');
}
console.log('4');
setTimeout(function () {
console.log('5');
}, 0);
async1();
new Promise(function (resolve) {
console.log('6');
resolve();
}).then(function () {
console.log('7');
});
console.log('8');
文章来源:https://blog.csdn.net/qq_37860930/article/details/135130363
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!