前端面试之事件循环机制

一、事件循环是什么？

首先，JS是单线程的，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环机制。在JS中把任务分为同步和异步，同步任务和异步任务的执行环境不同，同步任务会进入主线程，异步任务会进入EventQueue(事件队列)，主线程中的任务执行完毕后，回去EventQueue中读取对应的任务，并推到主线程中执行，不断重复过程，称为EventLoop(事件循环机制)

同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
异步任务：异步执行的任务，比如ajax网络请求、setTimeout定时函数等

二、宏任务和微任务

微任务

异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有：

Promise.then
Proxy对象替代
process.nextTick
MutaionObserver

宏任务

宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

常见的宏任务有：

整个script
setTimeout/setInterval
UI rendering/UI事件
setImmediate、I/O

事件循环、宏任务、微任务关系：执行一个宏任务，如果遇到微任务就将它放到微任务的事件队列中，当前宏任务执行完成后，会查看微任务的事件队列，然后将里面的所有微任务依次执行完

三、题目

console.log(1);
setTimeout(()=>{console.log(2);
},0)
new Promise((resolve, reject) => {console.log('new Promise');resolve();
}).then(()=>{console.log('then');
})
console.log(3);最终结果：1 => new Promise => 3 => then => 2
// 1、遇到console.log(1) 立即执行，直接打印 1
// 2、遇到定时器，属于新的宏任务，留着后面执行
// 3、遇到new Promise，立即执行，打印 new Promise
// 4、.then属于微任务，放入微任务队列
// 5、遇到console.log(3) 立即执行，直接打印 3
// 6、本轮宏任务执行完毕，去微任务队列中执行所有微任务 打印 then
// 7、执行新的宏任务setTimeout，打印 2

setTimeout(()=>{console.log(2);
},0)
console.log(5);new Promise((resolve,reject)=>{console.log(3);resolve();
}).then(()=>{console.log(4);
})
fn1()console.log('-------------------------------')async function fn1(){console.log(1)await fn2()console.log(10)
}async function fn2(){console.log('fn2')
}
console.log(3)// 最终结果：5  3    1fn2-------------------------------34102// 遇到setTimeout宏任务，留到下一轮再执行// console.log(5) 直接打印 5// .then 属于微任务，放入事件队列中// 遇到fn1()，遇到conso.log(1) 打印 1，遇到await fn2()，执行fn2()，await后面的执行延迟// 遇到console.log('fn2') 打印fn2// 立即执行console.log('--------')// 立即执行 console.log(3) 打印 3// 宏任务执行完毕，执行微任务.then 打印 4，再去执行await 后的console.log(10) 打印 10// 最后执行setTimeout 打印 2

前端面试之事件循环机制相关推荐

js中如何得到循环中的点击的这个id_Js篇面试题9请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
Js篇-面试题9-请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...
浏览器事件循环机制与Vue nextTick的实现
浏览器事件循环机制先上一段简单的代码 console.log('aa'); setTimeout(() => { console.log('bb')}, 0); Promise.resolve ...
js事件循环机制（await-async-事件循环）
await和async 异步函数 async function async关键字用于声明一个异步函数: async是asynchronous单词的缩写,异步.非同步: sync是synchronous ...
QT消息/事件循环机制与多线程的关系
关于Qt子线程和消息循环一.QT消息/事件循环机制 Qt作为一个可视化GUI界面操作系统,是基于事件驱动的,我们程序执行的顺序不再是线性,而是由一个个应用程序内部或外部的事件进行驱动,无事件时便阻塞 ...
es5如何实现promise_ES5实现Promise(1) - 事件循环机制
因为公司业务面向国企以及传统企业,所以代码需要能够在ie9以上运行,所以在项目中无法用一些新技术.比如ES6的Promise,这个Promise真的是太好使了,就跟便秘时使了开塞露一般.由于Promi ...

前端面试之事件循环机制

一、事件循环是什么？

二、宏任务和微任务

微任务

宏任务

三、题目

前端面试之事件循环机制相关推荐

最新文章

热门文章