第 41 题(请描述一下 Javascript 事件循环机制())
事件循环机制
【第 41 题(请描述一下 Javascript 事件循环机制())】在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理是比较复杂的,但关键步骤如下:
- 执行一个宏任务(栈中没有就从事件队列中获取)
- 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
- 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
- 当前宏任务执行完毕,开始检查渲染,然后 GUI 线程接管渲染
- 渲染完毕后,JS 线程继续接管,开始下一个宏任务(从事件队列中获取)
文章图片
那么什么是宏任务和微任务呢?
宏任务 (macro)task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)
浏览器为了能够使得 JS 内部(macro)task 与 DOM 任务能够有序的执行,会在一个(macro)task 执行结束后,在下一个(macro)task 执行开始前,对页面进行重新渲染
(macro)task 主要包含:script(整体代码)、setTimeout、setInterval微任务 microtask(又称为微任务),可以理解是在当前(macro) task 执行结束后立即执行的任务。也就是说,在当前(macro)task 任务后,下一个(macro)task 之前,在渲染之前。
所以它的响应速度相比 setTimeout(setTimeout 是(macro)task)会更快,因为无需等渲染。也就是说,在某一个 macrotask 执行完后,就会将在它执行期间产生的所有 microtask 都执行完毕(在渲染前)
microtask 主要包含:Promise.then、await 方法后面的代码属于.then(await 相当于一个 Promise)栗子
async function async1() {
console.log('A');
await async2();
console.log('B');
}
async function async2() {
console.log('C');
}
console.log('D');
setTimeout(function() {
console.log('E');
});
async1();
new Promise(function(resolve) {
console.log('F');
resolve();
}).then(function() {
console.log('G');
});
console.log('H');
首先我们需要明白以下几件事情
任务队列主要包括以下 3 个,宏任务队列、微任务队列、执行栈
- 一开始执行栈,以及微任务队列为空,宏任务只有一个 script 代码块
- 执行栈为空时,就把下一个宏任务添加到执行栈中运行
- 开始运行宏任务 script
- 程序往下执行遇到了 console.log('D'),这个时候直接打印
结果为: // D - 然后继续往下执行遇到了 setTimeout,它属于宏任务所以先把它添加到宏任务队列中
任务队列状态如下
执行栈:script
宏任务队列:setTimeout
微任务队列:空 - 继续往下执行遇到了 async1()方法,运行该方法遇到了 console.log('A'),直接打印
结果为:// D A - 继续往下执行遇到了 async2()方法,运行该方法遇到了 console.log('C'),直接打印
结果为:// D A C - async2()方法内的程序都执行完毕,回到上一层 async1()中,遇到 console.log('B'),它在 await async2() 的后面,所以属于异步并且添加到微任务队列中,然后回到最外面一层
任务队列状态如下
执行栈:script
宏任务队列:setTimeout
微任务队列:console.log('B') - 继续往下执行遇到了 new Promise(),该作用域内同步任务。执行作用域内方法,遇到了 console.log('F'),直接打印
结果为:// D A C F - 继续往下执行遇到了.then 属于异步,将 then 内部的代码添加到微任务队列中
任务队列状态如下
执行栈:script
宏任务队列:setTimeout
微任务队列:console.log('B')、console.log('G') - 该 new Promise 方法执行完毕,回到最后外面,遇到了 console.log('H'),直接打印
结果为:// D A C F H - 当前 script 代码块程序执行完毕,也就是当前宏任务执行完毕。在执行该宏任务的过程中,如果某个微任务已经准备就绪好了会标记一个准备就绪的状态
- 将已就绪的微任务从微任务队列中添加到执行栈中
任务队列状态如下
执行栈:console.log('B')、console.log('G')
宏任务队列:setTimeout
微任务队列:空 - 开始运行执行栈的任务,按顺序执行直接打印
结果为:// D A C F H B G
任务队列状态如下
执行栈:空
宏任务队列:setTimeout
微任务队列:空 - 当前的执行栈为空,则把宏任务队列中的 setTimeout 添加到执行栈中运行
- setTimeout 中遇到了 console.log('E')直接打印
结果为:// D A C F H B G E - 当前执行栈已执行完毕,检测是否有微任务(没有),检测是否有宏任务(没有)。整个程序执行完毕
参考资料
从一道题浅说 JavaScript 的事件循环
文章的内容/灵感都从下方内容中借鉴
- 【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...
- 【大数据可视化图表插件】https://www.npmjs.com/package...
- 【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/
推荐阅读
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 第6.2章(设置属性)
- parallels|parallels desktop 解决网络初始化失败问题
- 2018-02-06第三天|2018-02-06第三天 不能再了,反思到位就差改变
- 第三节|第三节 快乐和幸福(12)
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- android第三方框架(五)ButterKnife
- 开学第一天(下)
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇