【前端面试】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

相关推荐
袁煦丞12 分钟前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧14 分钟前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
敖丙15 分钟前
2025 AI Agent 元年:你还在用 AI 聊天,别人已靠“智能体”成为“超级个体”
程序员
晴殇i22 分钟前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____24 分钟前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �24 分钟前
前端转Java,从0到1学习教程
java·前端·学习
小奋斗41 分钟前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军42 分钟前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_4050233744 分钟前
webpack 学习
前端·学习·webpack
云中雾丽1 小时前
flutter中 Future 详细介绍
前端