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

相关推荐
未来之窗软件服务1 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友2 小时前
什么是断言?
前端·后端·安全
FIN66683 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4953 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1243 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树3 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66683 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER3 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰3 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木3 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js