【前端面试】V8事件轮询

在前端面试中,面试官可能会问你V8的引擎机制,给你这样的一道题目如下:

js 复制代码
console.log(1);

setTimeout(() => { 
    console.log(2);
});
new Promise(reslove => {  
    console.log(3);  
    reslove();
}).then(() => {  
    console.log(4);
});

console.log(5);

面试官会让你给出题目中输出的顺序 以及执行原理

直接在浏览器运行我们可以知道输出的顺序是1、3、5、4、2 ,那这过程中到底为什么会这样输出呢?要了解这个打印顺序的原理,我们必须弄清楚V8的事件轮询机制。下面是一张原理图:

里面涉及到两个概念,一个是宏任务MacroTask,一个是微任务MicroTask。其中MacroTask所存放的任务队列有setTimeout,setintervalMicroTask里面所存放的队列有Promise,.then,还有process,.nextTick等等

它轮询具体的方式是,我们这里假定一个流程,如下图:

开始执行 ,代码优先执行同步的script片段 ,然后我们就一直把同步的执行完。执行完同步之后的我们一旦遇到有异步的代码,我们就开始进入任务类型的判断,如果判断应该存放于MacroTask的,我们就放到宏任务队列里,如果需要放到MicroTask,我们就存放到微任务队列里。

等到所有的同步代码 执行完毕之后,我们优先从微任务里面去把任务拉取出来执行,其次才是从宏任务队列里面拉任务出来执行,然后如此递归循环,直到把所有代码片段执行完毕。

分析:

我们再来回顾看一下上面题目里面的代码:

1.我们首先第一段console.log(1),那我们直接打印1。

2.然后再到setTimeout里面有一个console.log(2),那我们就把这个console.log(2)放到MacroTask队列。

3.然后进而我们看到new Promise,它是构造函数,那直接打印3,再到.then里面console.log(4),我们就放到MicroTask队列里面,也是微任务队列。

4.最后就是console.log(5),直接打印5。

总结:

所以经历过第一遍分析之后,我们打印了1、3、5,等所有代码执行完毕之后,我们优先从微任务里面把代码片段抽取出来,那就从console.log(4)提取出来并执行,那就打印4,最后从宏任务队列里面拿出console.log(2)出来执行,所以打印2。这样下来整体的顺序就会打印成1、3、5、4、2

相关推荐
鹏多多6 分钟前
纯前端人脸识别利器:face-api.js手把手深入解析教学
前端·javascript·人工智能
无奈何杨44 分钟前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼1 小时前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆1 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang1 小时前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆1 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing1 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
程序员爱钓鱼4 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel11 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着11 小时前
全栈框架next.js入手指南
前端·next.js