前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务

此次操作，完成一个事件循环。

注意：只有执行栈里没有要执行的程序时，浏览器才会去轮询回调队列(若回调队列里有回调函数，将它拉进执行栈执行)

二、宏任务/微任务

============================================================================

异步代码的执行顺序是有差异的，并不是由上到下挨个执行。因为异步函数又有宏任务与微任务之分。

执行顺序为：同步任务 ——> 异步微任务 ——> 异步宏任务

宏任务：

1. 新程序或子程序被直接执行

2. 时间的回调函数

3. setTimeout和setInterval的回调

微任务：

1.Promise.then() .catch() .finally()

2. MutationObserver

3. Object.observe

无渲染

// 宏任务

console.log(‘1’)

// setTimeout 的回调是 宏任务，进入回调队列排队

setTimeout(() => {

// 宏任务

console.log(‘4’)

// setTimeout 的回调是 宏任务2，进入回调队列排队

setTimeout(() => {

console.log(‘7’)

}, 0)

// Promise 的回调是 微任务，本轮调用末尾直接执行

Promise.resolve()

.then(() => {

console.log(‘6’)

})

console.log(‘5’)

}, 0)

// Promise 的回调是 微任务，本轮调用末尾直接执行

Promise.resolve()

.then(() => {

console.log(‘3’)

})

console.log(‘2’)

以上代码执行循序为1~7正序输出。

每一个宏任务，后面都可以跟一个微任务队列，如果微任务队列中有指令或方法，那么就会执行；如果没有，则开始执行下一个宏任务，直到所有的宏任务执行完为止，微任务相当于宏任务的小尾巴

所以，这并没有违背回调队列的先进先出原则，一个宏任务中如果伴随着微任务，那么就先执行微任务，宏任务先放置，等到后面的微任务一个个都执行完后，再开始执行宏任务！

---

其实浏览器执行Js代码的完整顺序应该是：同步任务 ——> 异步微任务 ——> DOM渲染页面 ——>异步宏任务

没错，在微任务与宏任务之间，浏览器会进行一次DOM渲染，如下案例：

有渲染

//向body添加h1节点，内容为Hello

const $content = $(‘

Hello

’)

${(}^{\prime }bod{y}^{\prime }).append($content)

console.log(1);

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。